Более одного шаблона в одном компоненте в AngularJS 1.5

Question

Могу ли я использовать несколько шаблонов в компонентах AngularJS 1.5? У меня есть один компонент, имеющий один атрибут, поэтому я хочу загрузить другой шаблон на основе этого имени атрибута. Как добиться загрузки шаблонов на основе имени атрибута элемента?

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

Спасибо.

Answer 1

Я использую два способа для создания динамического шаблона компонента в 1.5.x:

1) Пропустите через атр собственности:

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

2) Подайте услуги в шаблон и получить шаблон оттуда:

функция templateURL:

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

В GetTemplate функция обратного шаблона URL на основе переменной

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

Pass переменной «Вид» на заводе во-первых, с помощью метода набора.

Если вам нужно больше изменений в шаблоне html, вернитесь к использованию директивы и используйте службу компиляции с большей поддержкой.

Answer 2

Что касается передачи шаблона в качестве параметра для компонента? Например создать компонент как:

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

И, используя компонент, как показано ниже, может помочь

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