TemplateUrl指令：AngularJs

Question

它可以讀取範圍爲指令templateUrl？

我想要做這樣的事情：

mDirective.directive('directive', [function() { 
    return { 
     restrict: 'A', 
     scope: { 
      types :'=types' 
     }, 

templateUrl:'.mytemplate/'+scope.types+'.html' 

Answer 1

範圍在該指令的templateUrl可用。在github上有一個功能請求：Either add scope to attributes that are passed to templateUrl function or preprocess attributes based on scope parameters。

這裏有兩個選項（第二個是更通用的）：

屬性：範圍不可用。但原始屬性是。因此，如果原始屬性爲你工作，例如，如果它只是一個靜態的字符串是這樣的：

<div directive types="test1"></div> 

然後我們可以通過函數到templateUrl。第二個參數是屬性，這樣你就可以建立一個模板URL與字符串像這樣：

templateUrl: function(elem, attrs){ return ('mytemplate/'+attrs.types+'.html')}, 

但如果types可能會改變，所以你更好的解決方案可能是這不起作用：

ngInclude您可以參考一個範圍可變的ngInclude源表達的內部。因此，而不是使用templateURL我們使用template然後讓ngInclude處理設置/更改模板：

template: '<div ng-include src="\'mytemplate/\'+types+\'.html\'"></div>', 

你也可以手動編譯並添加僞指令中的模板。但使用ngInclude很容易，也可以啓用動畫。

demo plunker顯示這兩個選項，並與一對夫婦的按鈕切換模板，看看ngInclude開關。