Question

我有以下示例代码，其中包含三个嵌套指令，每个指令都显示为方框。每个指令都有一个控制器，一个预链接功能和一个后链接功能。根据角度文档，我期望执行顺序，其中第一个控制器和预链接函数执行，最后所有后期链接函数将以相反的顺序执行。

但是在我可以看到的示例中，它开始一次又一次地实例化控制器，好像它处于某种递归循环中一样。这是事情执行的顺序。

外部控制器执行
外部预链接执行
中间控制器执行
中间预链接执行
内部控制器执行
内部预链接执行
内部链接执行
内部控制器执行
内部预链接执行
内部链接执行
中间帖链接执行
中间控制器执行
中间预链接执行
内部控制器执行
内部预链接执行
内部链接执行
内部控制器执行
内部预链接执行
内部链接执行
中间帖链接执行
外部帖子链接执行

为什么你会期望这个顺序展开的东西。为什么在地球上应该有超过9行输出。

现在增加惊喜;如果我使用1.5.8角，输出正好是9行，正如预期的那样。所有以前版本的角度车都是如此，或者是文档!!

我需要一些帮助来理解这段代码的结果。我对这些发现感到非常不安。

代码上传到这里：

http://codepen.io/vsjha18-1471636320/details/Grrmwm/

的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Training Set</title>

        <!-- styles -->
        <link rel="stylesheet" type="text/css" href="style.css">

        <!-- JS libs -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body ng-app="app" ng-controller="MainCtrl">
        <div outer class="outer">
            <div middle class="middle">
                <div inner class="inner"></div>
            </div>
        </div>
        <hr>
        <ol>
            <li  ng-repeat="m in message track by $index">{{ m}}</li>
        </ol>

    </body>
</html>

的script.js

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope){
    $scope.tester = "this means angular is working ...";
    $scope.message = [];
});

app.directive("outer", function(){
    return {
        scope: true,
        restrict: "A",
        transclude: true,
        template: "<h1> this is outer</h1> <ng-transclude><ng-transclude>",
        controller: function($scope) {
            $scope.message.push("outer controller executes")
            console.log("outer controller")
        },
        compile: function(elems, attrs, tfn) {
            console.log("outer compile");
            return {
                pre: function(scope, elems, attrs) {
                    scope.message.push("outer pre link executes")
                    console.log("outer pre")
                },
                post: function(scope, elems, attrs) {
                    scope.message.push("outer post link executes")
                    console.log("outer post")
                }
            }
        }
    }
});


app.directive("middle", function(){
    return {
        scope: true,
        restrict: "A",
        transclude: true,
        template: "<h1> this is middle </h1><ng-transclude><ng-transclude>",
        controller: function($scope) {
            $scope.message.push("middle controller executes")
            console.log("middle compile")
        },
        compile: function(elems, attrs, tfn) {
            return {
                pre: function(scope, elems, attrs) {
                    scope.message.push("middle pre link executes")
                    console.log("middle pre")
                },
                post: function(scope, elems, attrs) {
                    scope.message.push("middle post link executes")
                    console.log("middle post")
                }
            }
        }
    }
})

app.directive("inner", function(){
    return {
        scope: true,
        restrict: "A",
        template: "<h1> this is inner </h1>",
        controller: function($scope) {
            $scope.message.push("inner controller executes");
            console.log("inner controller")
        },
        compile: function(elems, attrs, tfn) {
            return {
                pre: function(scope, elems, attrs) {
                    scope.message.push("inner pre link executes");
                    console.log("inner pre")
                },
                post: function(scope, elems, attrs) {
                    scope.message.push("inner post link executes");
                    console.log("inner post")
                }
            }
        }
    }
})

的style.css

.outer {
    border: 3px solid black;
    height: 500px;
    padding: 20px;
    width: 50%;
}

.middle {
    border: 3px solid black;
    height: 300px;
    padding: 20px;
}


.inner {
    border: 3px solid black;
    height: 100px;
    padding: 20px;
}

具有转置的嵌套指令被多次实例化。为什么呢？

0 个答案: