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

e.g。

<强> 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>

将指令属性绑定到模板

1 个答案: