将指令属性绑定到模板

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>