为什么帖子链接功能的transcluded子链接功能之前执行？ [英] Why is the post link function executed before the transcluded child link functions?
问题描述
在AngularJS（pre /后）链接功能的时机是很好的
The timing of (pre/post)link functions in AngularJS are well defined in the documentation
pre-链接功能
执行的子元素联系在一起了。没有安全做DOM
转型，因为编译器链接功能将无法找到
正确的元素联系起来。
Executed before the child elements are linked. Not safe to do DOM transformation since the compiler linking function will fail to locate the correct elements for linking.
后链接功能
执行的子元素链接后。它是安全的DOM
改造后链接功能。
Executed after the child elements are linked. It is safe to do DOM transformation in the post-linking function.
和这篇博客文章清楚地说明了这一点预计订单。
and this blog post clearly illustrates this expected order.
但这个命令似乎不使用 NG-transclude 和嵌套指令时适用。
But this order does not seem to apply when using ng-transclude and nested directives.
下面是一个dropright元素（ 见Plunkr ）
Here is an example for a dropright element (See the Plunkr)
// index.html
<dropright>
<col1-item name="a">
<col2-item>1</col2-item>
<col2-item>2</col2-item>
</col1-item>
<col1-item name="b">
...
</dropright>
// dropright-template.html
<div id="col1-el" ng-transclude></div>
<div id="col2-el">
<!-- Only angularJS will put elements in there -->
</div>
// col1-item-template.html
<p ng-transclude></p>
// col2-item-template.html
<div ng-transclude></div>
该dropright看起来像
The dropright looks like
该指令写入日志在控制台时，他们的链接和控制器功能被调用。
它通常显示：
The directives write a log in the console when their link and controller functions are called. It usually displays:
但有时（很少刷新后），并不如预期的顺序：
But sometimes (after few refreshes), the order is not as expected:
该dropright链接后功能是其子女的链接后功能之前执行。
The dropright post-link function is executed before the post-link function of its children.
这可能是因为，在我的具体情况，我呼吁在儿童指令的dropright控制器（的查看Plunkr ）
It may be because, in my particular case, I am calling the dropright controller in the children's directives (See the Plunkr)
angular.module('someApp', [])
.directive('dropright', function() {
return {
restrict: 'E',
transclude: 'true',
controller: function($scope, $element, $attrs) {
console.info('controller - dropright');
$scope.col1Tab = [];
$scope.col2Tab = [];
this.addCol1Item = function(el) {
console.log('(col1Tab pushed)');
$scope.col1Tab.push(el);
};
this.addCol2Item = function(el) {
console.log('(col2Tab pushed)');
$scope.col2Tab.push(el);
};
},
link: {
post: function(scope, element, attrs) {
console.info('post-link - dropright');
// Here, I want to move some of the elements of #col1-el
// into #col2-el
}
},
templateUrl: 'dropright-tpl.html'
};
})
.directive('col1Item', function($interpolate) {
return {
require: '^dropright',
restrict: 'E',
transclude: true,
controller: function() {
console.log('-- controller - col1Item');
},
link: {
post: function(scope, element, attrs, droprightCtrl) {
console.log('-- post-link - col1Item');
droprightCtrl.addCol1Item(element.children()[0]);
}
},
templateUrl: 'col1-tpl.html'
};
})
.directive('col2Item', function() {
var directiveDefinitionObject = {
require: '^dropright',
restrict: 'E',
transclude: true,
controller: function() {
console.log('---- controller - col2Item');
},
link: {
post: function(scope, element, attrs, droprightCtrl) {
console.log('---- post-link - col2Item');
droprightCtrl.addCol2Item(element.children()[0]);
}
},
templateUrl: 'col2-tpl.html'
};
return directiveDefinitionObject;
});
有没有在使用transclusion其子项的所有链接功能后，执行指令的链接功能的清洁方法是什么？
推荐答案
这是我的理论 - 它不是导致该序列的问题，而是模板是一个templateUrl的transclude方面。模板需要先解决后链接功能得到行动上 - 因此，我们说后链接功能是安全的DOM操作。虽然我们得到了所有的3模板304S - 我们确实有读他们和它最终解决了模板的承诺
This is my theory - its not the transclude aspect that is causing the sequence issue but rather the template being a templateUrl. The template needs to be resolved before the post link function get to act on it - hence we say post link function is safe to do DOM manipulation. While we are getting 304s for all the 3 templates - we do have to read them and it ultimately resolves the template promise.
我创建的模板，而不是一个templateUrl plunker证明推论。我已经热刷新/停止plunker /运行很多次，但我总是链接 - dropright 末
I created a plunker with template instead of templateUrl to prove the corollary. I have hot refresh/plunker Stop/Run many times but I always get link - dropright at the end.
我不知道pretend充分了解compile.js code。然而，它确实出现在
compileTemplateUrl 函数 $ http.success（）解析模板，然后成功的 applyDirectivesToNode 函数被调用 postLinkFn 。
I don't pretend to understand the compile.js code fully. However it does appear that in
compileTemplateUrl function $http.success() resolves the template and then on success the applyDirectivesToNode function is called passing in postLinkFn.
<一个href=\"https://github.com/angular/angular.js/blob/master/src/ng/compile.js\">https://github.com/angular/angular.js/blob/master/src/ng/compile.js
这篇关于为什么帖子链接功能的transcluded子链接功能之前执行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
