動態templateUrl基於元素屬性內

Question

我有如下所示的HTML元素：

<new-element data-type="{{widget.type}}"></new-element> 

我想有我指導使用不同的templateUrl取決於什麼type是。

appDirectives.directive('newElement', function() {   
    return { 
     restrict : 'E', 
     scope: false,    
     templateUrl: function(elem, attrs) {  
      var template_url = (attrs.type == 'widgetA') ? 'template-a.html' : 'template-other.html'; 
      return template_url; 
     } 
    } 
}); 

總是得到返回的是template-other.html因爲type值仍然{{widget.type}}和尚未插入模板。

有沒有辦法讓type屬性上的手錶，並有相應的模板更改？

Answer 1

你不能做到這一點：

var template_url = (attrs.type == 'widgetA') ? 'template-a.html' : 'template-other.html'; 

因爲你沒有訪問您的模板的方法來指導性，但你可以做這樣的事情：

appDirectives.directive('newElement', function() {   
    return { 
     restrict : 'E', 
     scope: {}, 
     bindToController: { 
     type: '=' 
     }, 
     controller: 'SomeController', 
     controllerAs: 'ctrl', 
     template: '<div ng-if="ctrl.type === 'widgetA'"><!-- your widgetA contet --></div><div ng-if="ctrl.type === 'widgetB'"><!-- your widgetB content --></div>'; 
    } 
}); 

在這裏，您可以找到一篇關於如何用鏈接功能做你想要的文章，但我建議使用控制器。

http://onehungrymind.com/angularjs-dynamic-templates/