Angularjs 将指令属性绑定到模板

我有一个指令，它使用一个属性来构建更复杂的标记

以下是正在使用的指令：

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

{{alert.description}

指令模板如下所示：

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

---

如何将heading属性放入

h1

，以便对

count

的更改在heading中更新？

您可以隔离范围并使用“@”符号来收集用于模板指令的变量。还请注意，在您的模板中，

ng transclude

是错误的

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>

{{alert.description}删除

假设指令位于

标记上，其属性将作为链接函数的第三个参数（在范围和元素之后）提供给指令