Как использовать различные URLs шаблоны для того же компонента в угловом 1.5

Question

Я реализовал компонент следующим способом

angular.module('moduleName') 
     .component('myComponent', { 
      templateUrl: 'templatePath1.tpl.html', 
      controller: myController, 
      controllerAs: 'vm', 
      bindings: { 
       b1: '&', 
       b2: '&' 
      } 
     }); 

Я использую, что, как <my-component b1="someThing1" b2="someThing2"></my-component>

Теперь, я хочу, чтобы использовать тот же myController с другим шаблоном, находящимся в templatePath2.tpl.html.

Один из способов заключается в создании другого компонента myComponent2,

angular.module('moduleName') 
     .component('myComponent2', { 
      templateUrl: 'templatePath2.tpl.html', 
      controller: myController, 
      controllerAs: 'vm', 
      bindings: { 
       b1: '&', 
       b2: '&' 
      } 
     }); 

Есть ли способ, что я могу использовать предыдущий компонент и выберите templateUrl на основе ATTR? Если да, то как это сделать?

Answer 1

templateUrl может быть функцией, которая получает элемент и атрибуты в качестве аргументов:

angular.module('moduleName') 
    .component('myComponent', { 
     templateUrl: function(element, attrs) { 
         return 'templatePath' + attrs.x + '.tpl.html'; 
        }, 

<my-component x="1"></my-component>