当内部指令具有ng-repeat时,为什么在内部链接之前调用外部帖子链接

时间:2015-02-20 08:11:53

标签: angularjs-directive angularjs-ng-repeat

我正在使用AngularJs,我正在尝试定义自定义指令。 问题是当我有一个ng-repeat指令时,我不太清楚前后连接函数的执行顺序。

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

根据我的阅读,正常的顺序是

外部 - 前 - &gt;内 - 前 - &gt;内部 - &gt;外交

但是使用ng-repeat(ng-if也是如此),内部函数在外部

之后被称为

我读过可能发生在templateUrl上的情况,但这不是这种情况。 ng-repeat指令如何影响执行顺序?

1 个答案:

答案 0 :(得分:0)

您可以为高于ng-repeat的内部指令添加优先级(默认优先级为0)。  ng-repeat优先级为1000。

priority: 1001,