將指令屬性綁定到模板

Question

我有一個使用屬性構建更復雜標記的指令。

這裏是正在使用的指令：

<alerts heading="Alerts {{ count }}"> 
    <ul> 
    <li ng-repeat="alert in alerts">{{ alert.description }}</li> 
    </ul> 
</alerts> 

該指令模板看起來是這樣的：

<div> 
    <h1></h1> 
    <div ng-transclude></div> 
</div> 

我怎樣才能獲得標題屬性爲h1因此，在改變count更新標題？

Answer 1

您可以隔離您的範圍並使用'@'表示法收集要用於模板指令的變量。另請注意，在您的模板中，ng-transclude拼寫錯誤。

Sample Here

例如，

JAVASCRIPT

directive('alerts', function() { 
    return { 
     restrict: 'E', 
     scope: {heading: '@'}, 
     transclude: true, 
     templateUrl: 'alert.html' 
    } 
    }); 

alert.html

<div> 
    <h1 ng-bind="heading"></h1> 
    <div ng-transclude></div> 
</div> 

使用

<alerts heading="Alerts {{alerts.length}}"> 
    <ul> 
    <li ng-repeat="alert in alerts">{{ alert.description }} <button ng-click="remove(index)">remove</button></li> 
    </ul> 
</alerts>