更改屬性

Question

我有自定義指令加載一個div

.directive('page', function() { 
    return { 
     templateUrl: function (elem, attr) { 
      return 'pages/page-' + attr.num + '.html'; 
     } 
    }; 
}); 

這裏內頁是自定義指令

<div page num="{{pageNo}}"></div> 

在這裏，我想改變頁碼的DOM表示控制器。正如你想的pageNo您的指令內插值

指令工作正常，如果該值直接添加

<div page num="1"></div> 

Answer 1

，你不能得到templateUrl函數內部的價值。您需要使用ng-include指令來獲取指令中的作用域名稱的值。

標記

<div page num="{{pageNo}}"></div> 

代碼

app.directive('page', function() { 
    return { 
    scope: { 
     num: '@' 
    }, 
    template: '<div ng-include="\'pages/page-\'+ num + \'.html\'"></div>' 
    }; 
}); 

Working Plunkr

Answer 2

從the docs：

您目前無法從templateUrl函數訪問範圍變量，因爲在範圍初始化之前請求模板。

這意味着您只能訪問該屬性的字面值，並且無法對特定範圍進行評估。你可能能夠在閉包中定義你的指令，並以這種方式訪問​​父範圍。那麼你可以撥打scope.$eval('pageNo')。

但是：這將是一個非常醜陋的黑客。我寧願選擇解決方案ng-include建議@ pankaj-parkar