Блог

Главная - Вопросы по программированию - Привязать атрибут директивы к шаблону

Привязать атрибут директивы к шаблону

#angularjs #angularjs-directive

#angularjs #angularjs-директива

Вопрос:

У меня есть директива, которая использует атрибут для создания более сложной разметки.

Вот используемая директива:

 <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 обновлены?

Комментарии:

1. Предполагая, что директива находится в <alerts> теге, ее атрибуты становятся доступными директиве в качестве третьего параметра функции link (после области видимости и элемента).)

Ответ №1:

Вы можете изолировать свою область видимости и использовать обозначение «@» для сбора переменных, которые будут использоваться для вашей директивы шаблона. Пожалуйста, также обратите внимание, что в вашем шаблоне ng-transclude написано неправильно.

Пример здесь

например

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>