Więcej niż jeden szablon w tym samym komponencie w AngularJS 1.5

Question

Czy mogę użyć więcej niż jednego szablonu w komponentach AngularJS 1.5? Mam jeden składnik mający jeden atrybut, więc chcę załadować inny szablon na podstawie tej nazwy atrybutu. Jak mogę uzyskać ładowanie szablonów na podstawie nazwy atrybutu elementu?

jsConfigApp.component('show', { 
templateUrl: 'component/show.html', //How to change it based on attribute value? 
bindings:{ 
    view:"@" 
}, 
controller: function() { 
    console.log(this.view) 
    if (this.view = "user") { 
     console.log("user") 
    } else if (this.view = "user") { 
     console.log("shop") 
    } else { 
     console.log("none") 
    }  
} 
}) 

Dzięki.

Answer 1

używam dwa sposoby dokonywania dynamiczny szablon komponentu w 1.5.x:

1) Przejść przez attr nieruchomości:

templateUrl: function($element, $attrs) { 
     return $attrs.template; 
} 

2) wstrzyknąć usługi do szablonu i uzyskać szablon stamtąd:

funkcja templateURL:

templateUrl: function($element, $attrs,TemplateService) { 
     console.log('get template from service:' + TemplateService.getTemplate()); 
     return TemplateService.getTemplate(); 
} 

W getTemplate zwracanej przez funkcję szablonu adresu URL na podstawie zmiennej

getTemplate: function(){ 
    if (this.view = "user") { 
      return "user.html"; 
    } else if (this.view = "user") { 
      return "shop.html"; 
    } else { 
     console.log("none") 
    } 
    return "shop.html";  
} 

Przełęcz zmiennej „widzenia” do fabryki po pierwsze poprzez metodę zadanej.

Jeśli potrzebujesz więcej zmian w szablonie HTML, wróć do dyrektywy i skorzystaj z usługi kompilacji z większą obsługą.

Answer 2

Co z przekazywaniem szablonu jako parametrem do komponentu? Na przykład utworzyć komponent jak:

module.component('testComponent', { 
    controllerAs: 'vm', 
    controller: Controller, 
    bindings: { 
     template : '@' 
    }, 
    templateUrl: function($element, $attrs) { 
     var templates = { 
      'first' :'components/first-template.html', 
      'second':'components/second-template.html', 
      'third' :'components/third-template.html' 
     } 
     return templates[$attrs.template]; 
    } 
}); 

i używając jako składnika poniżej może pomóc

<test-component template='first'></test-component>