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

Можно ли использовать более одного шаблона в компонентах 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")
    }      
}
})

Спасибо.

Ответы

Ответ 1

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

1) Перейдите через свойство attr:

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 функция возвращает шаблон шаблона на основе переменной

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

Передать переменную 'view' на factory сначала с помощью метода set.

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

Ответ 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>