Атрибуты области действия директивы без изолированного объема в AngularJS
Есть ли способ унаследовать родительскую область, расширяя ее с помощью переданных атрибутов?
Я хочу передать параметры в директиву многократного использования непосредственно из шаблона без необходимости изменения DOM в функции связывания.
Например:
<form-input icon="icon-email" label="email" ng-model="data.input"></form-input>
Для такой директивы:
<div class="form-group">
<label>{{label}}</label>
<div class="input-group">
<div class="{{icon}}">@</div>
<input class="form-control" placeholder="Email" ng-model="mail.email">
</div>
</div>
ng-model находится в родительской области, контролируя всю форму в этом случае, но я не считаю необходимым хранить атрибуты стилей в контроллере.
Есть ли способ передачи параметров непосредственно в шаблоне без создания области выделения?
Ответы
Ответ 1
Вы не сможете "расширить" родительскую область как таковую. Однако ваша цель может быть достигнута за счет использования атрибутов атрибутов директивы, которые вводятся в функцию ссылок вашей директивы.
Так, например. для привязки переменной label
, ваша функция ссылки будет выглядеть следующим образом:
link: function ($scope, $element, $attributes) {
$scope.label = $scope.$eval($attributes.label);
}
Вы можете проверить ниже плункер для живой демонстрации.
http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=preview
Ответ 2
Ответ от Angad будет работать для статической привязки, но если значение атрибута может измениться после привязки, это не будет обновляться. Если вам это нужно, разрешение будет состоять в том, чтобы передать значение как строку вместо ссылки:
<form-input icon="icon-email" label="{{email}}" ng-model="data.input"></form-input>
В директиве добавьте $ observ для атрибута, чтобы обновить переменную области видимости:
$attributes.$observe('label', function(newValue){$scope.label=newValue});
Теперь переменная области будет динамически изменяться, если значение атрибута изменится.