Привет всем, я пытаюсь заполучить "расширенный" DOM моей директивы. То есть я хочу иметь возможность находить элементы DOM, которые генерируются этой директивой, и управлять ими. Я думал, что это должны были делать функции link или postlink, но я продолжаю находить нерасширенную версию моего шаблона (или, по крайней мере, то, что должно генерировать ng-repeat, отсутствует). Вот мой пример. Обратите внимание, что количество элементов «li» равно нулю в функциях до и после ссылки, но после тайм-аута их пять. Мне нужно найти пятерку, но без подвохов таймаута! Как правильно найти эту структуру, чтобы я мог с ней работать?
РЕДАКТИРОВАТЬ:
Хорошо, я полагаю, что я определил, что происходит то, что шаблон действительно был заменен в элемент (на самом деле, по-видимому, к тому времени, когда вызывается функция предварительной ссылки. Проблема в том, что она не была «оценена» (я думаю, этот этап - это то, что документы довольно странно называют «интерполированным») даже к моменту вызова функции пост-ссылки.
То есть, если я помещаю в тело моих функций pre, post и timeout ниже вызов для печати внутреннего html элемента, я получаю:
pre/post html is<ul><!-- ngRepeat: item in list --></ul>
но после тайм-аута появляется куча <li> элементов. Итак, вопрос действительно должен заключаться в том, «как мне получить обратный вызов после того, как шаблон был оценен / интерполирован?
(ИЗМЕНИТЬ снова, я изменил приведенный ниже пример кода, чтобы он соответствовал этому новому описанию!)
ИЗМЕНИТЬ снова, чтобы добавить предложенную $ compile (и использовать $ timeout). Я заметил, что это ничего не меняет. Я думаю, проблема не в компиляции как таковой, а в расширении ngRepeat, которое, кажется, каким-то образом происходит в другом «цикле».
<!doctype html>
<html data-ng-app="MyModule">
<body data-ng-controller="MyController">
<h1>Version 3</h1>
<test></test>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
angular.module('MyModule', [])
.controller('MyController', function ($scope) {
$scope.list = [1, 2, 3, 4, 5];
})
//.directive('test', function ($compile) {
.directive('test', function ($compile, $timeout) {
return {
template: '<ul><li ng-repeat=" item in list ">{{item}}</li></ul>',
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
//console.log('pre, li count is ' + iElement.find('li').length);
console.log('pre html is' + iElement.html());
},
post: function postLink(scope, iElement, iAttrs, controller) {
//console.log('post, li count is ' + iElement.find('li').length);
console.log('post html is' + iElement.html());
iElement.append($compile(this.template)(scope));
console.log('post-compile html is' + iElement.html());
//setTimeout(() =>
$timeout(() =>
console.log('post timeout, li count is '
//+ tElement.find('li').length),
+ tElement.html()),
10, true);
}
}
}
};
});
</script>
</body>
</html>ТИА, Тоби
linkиpost-link- это одно и то же, если вы просто укажетеlink, это неявноpost-link- person Robin-Hoodie schedule 18.06.2016setTimeoutс angular, он не знает angular. используйте вместо этого$timeout. При этом в вашем случае вам, вероятно, следует использовать$compileдля получения доступа к скомпилированному элементу, а не к функциямlink. Результатомlinkфункций является HTML, который будет добавлен к DOM; они - последнее место, где вы можете манипулировать HTML до того, как это повлияет на DOM, а не первое место, где вы можете получить доступ к измененному дереву DOM. - person Claies schedule 18.06.2016ng-repeat, также должно быть поучительным; фаза компиляции, на которой все директивы идентифицируются и сортируются по приоритету, и фаза связывания, на которой выполняется любая работа, которая связывает конкретный экземпляр области и конкретный экземпляр<li>.ngRepeatработает, предотвращая спуск процесса компиляции в элемент<li>, чтобы он мог создать клон оригинала и самостоятельно обрабатывать вставку и удаление узлов DOM. - person Claies schedule 18.06.2016