当内部指令有ng重复时,为什么在内部链接之前调用外部post链接



我首次使用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,

最新更新