我首次使用AngularJs,我正在尝试定义自定义指令。问题是,当我有ng重复指令时,我不能很好地理解前后链接函数的执行顺序。
http://jsfiddle.net/oliviergeorg/xzps7mjk/4/
<div ng-controller="TestController">
<outer id='o1'>
<inner id='i1' ng-repeat='value in values'>{{value}}</inner>
</outer>
<outer id='o2'>
<inner id='i2'>X</inner>
</outer>
<div id='log'></div>
</div>
javascript是
var myApp = angular.module('mainApp', []);
var logIt = function() {
var log = document.getElementById('log');
return function (txt) {
log.innerHTML += txt + "<br />";
}
}();
myApp.controller('TestController', ['$scope', function ($scope) {
$scope.values = [1,2,3];
logIt("new controller");
}])
.directive('outer', function () {
return {
restrict: 'E',
scope: {},
link: {
pre: function (scope, element, attrs) {
logIt("outer - pre - " + attrs.id);
},
post: function (scope, element, attrs) {
logIt("outer - post - " + attrs.id);
},
}
};
})
.directive('inner', function () {
return {
restrict: 'E',
link: {
pre: function (scope, element, attrs) {
logIt("inner - pre - " + attrs.id);
},
post: function (scope, element, attrs) {
logIt("inner - post - " + attrs.id);
},
}
};
});
我从运行脚本中得到的执行顺序是
outer - pre - o1
outer - post - o1
outer - pre - o2
inner - pre - i2
inner - post - i2
outer - post - o2
inner - pre - i1
inner - post - i1
inner - pre - i1
inner - post - i1
inner - pre - i1
inner - post - i1
据我所知,正常的订单是
外预->内预->内后->外后
但是对于一个ng重复(ng if也这样做),内部函数在外部后之后被称为
我读到templateUrl可能会发生这种情况,但这里的情况并非如此。ng repeat指令是如何影响执行顺序的?
您可以为高于ng-repeat
的内部指令添加优先级(默认优先级为0)。CCD_ 2具有优先级1000。
priority: 1001,