Più di un modello nello stesso componente in AngularJS 1.5

Question

Posso utilizzare più di un modello nei componenti di AngularJS 1.5? Ho un componente con un attributo, quindi voglio caricare template diversi in base a quel nome di attributo. Come posso ottenere il caricamento dei modelli in base al nome attributo dell'elemento?

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") 
    }  
} 
}) 

Grazie.

Answer 1

Io uso due modi per rendere modello dinamico di un componente nel 1.5.x:

1) Far passare attraverso attr proprietà:

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

2) Iniettare un servizio nel modello e ottenere modello da lì:

funzione TemplateURL:

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

In getTemplate funzione di ritorno template URL in base variabile

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

Passo variabile 'view' alla fabbrica in primo luogo attraverso un metodo set.

Se sono necessarie ulteriori modifiche nel modello html, torna a utilizzare la direttiva e utilizzare il servizio di compilazione con maggiore supporto.

Answer 2

Che ne dici di passare il modello come parametro al componente? Per esempio creare un componente come:

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]; 
    } 
}); 

E l'utilizzo di componenti, come di seguito possono contribuire

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