У меня есть директива AngularJS, которая включает ngIf
, и я хотел бы изменить часть DOM внутри ngIf
в функции ссылки. К сожалению, кажется, что ngIf
не позволяет мне находить элементы DOM внутри него в функции ссылок.
Вот код для директивы:
directive('column', function () {
return {
templateUrl: 'views/column.html',
restrict: 'E',
scope: {
column: '='
},
controller: ['$scope', function ($scope) {
$scope.editing = true;
$scope.toggleEditing = function () {
$scope.editing = !$scope.editing;
};
}],
link: function postLink(scope, element) {
var select = element.find('select');
console.log(select); // See if it can find the select element
// var types = scope.column.types();
// add types as options to the select element
}
};
});
И вот упрощенный html директивы:
<div class="column">
<div>{{ column.title }}</div>
<form name="columnForm" role="form" ng-if="editing">
<select></select>
</form>
</div>
Вот ссылка на пример jsFiddle http://jsfiddle.net/dedalusj/Y49Xx/1/
Вызов element.find
в функции link возвращает пустой массив, но как только я удаляю ngIf
из формы, он возвращает правильный элемент DOM. У меня такое чувство, что я делаю это неправильно.
UPDATE
Спасибо за ответы, но я нашел другое решение. Я просто создал другую директиву, которая инкапсулирует форму, добавила ее в шаблон шаблона column
с помощью ng-if="editing"
.
Директива формы не имеет собственной области видимости, поэтому она эффективно работает из области действия column
и всегда имеет доступ к элементу select
, поскольку она находится внутри своего дерева DOM. Я оплачиваю дополнительную директиву, но мне не нужно использовать взломать $timeout
. Я создал новый jsFiddle, чтобы проиллюстрировать решение http://jsfiddle.net/dedalusj/nx3vX/1/
Спасибо @Michael, но я не могу просто использовать ng-option
, потому что массив types
поступает из XML файла, а его элементы - другие angular.элементные объекты, которые нельзя легко вставить с помощью ng-option
.