zoukankan      html  css  js  c++  java
  • Directive Controller And Link Timing In AngularJS

    I've talked about the timing of directives in AngularJS a few times before. But, it's a rather complicated topic, so I don't mind digging a bit deeper. This time, I'm looking at the timing of directive controllers vs. directive link functions. As the DOM (Document Object Model) is compiled by AngularJS, the directive controllers and link functions execute at different parts of the compile lifecycle.

    When AngularJS compiles the DOM, it walks the DOM tree in a depth-first, top-down manner. As it walks down the DOM, it instantiates the directive controllers. Then, when it gets to the bottom of a local DOM tree branch, it starts linking the directives in a bottom-up manner as it walks back up the branch. This doesn't mean that all directive controllers are run before all directive linking; it simply means that in a local DOM branch, the directive controllers are instantiated before they are linked.

    To see this in action, I've put together a very simple DOM tree in which each element has a unique (but almost identical) directive. As each directive controller and link function is executed, it will log to the console. This way, we can see the timing of the various methods in relation to the DOM tree structure.

    <!doctype html>
    <html ng-app="Demo">
    <head>
        <meta charset="utf-8" />
    
        <title>
            Directive Controller And Link Timing In AngularJS
        </title>
    </head>
    <body>
    
        <h1>
            Directive Controller And Link Timing In AngularJS
        </h1>
    
        <div bn-outer>
    
            <p bn-mid>
    
                <span bn-inner>
    
                    Woot!
    
                </span>
    
            </p>
    
            <p bn-second-mid>
    
                Woot, indeed!
    
            </p>
    
        </div>
    
    
        <!-- Load scripts. -->
        <script type="text/javascript" src="../../vendor/jquery/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="../../vendor/angularjs/angular-1.2.4.min.js"></script>
        <script type="text/javascript">
            // Create an application module for our demo.
            var app = angular.module( "Demo", [] );
            // -------------------------------------------------- //
            // -------------------------------------------------- //
            // I demonstrate the timing of directive execution.
            app.directive(
                "bnOuter",
                function() {
                    function Controller( $scope ) {
                        console.log( "Outer - Controller" );
                    }
                    function link( $scope, element, attributes, controller ) {
                        console.log( "Outer - Link" );
                    }
                    // Return directive configuration.
                    return({
                        controller: Controller,
                        link: link
                    });
                }
            );
            // -------------------------------------------------- //
            // -------------------------------------------------- //
            // I demonstrate the timing of directive execution.
            app.directive(
                "bnMid",
                function() {
                    function Controller( $scope ) {
                        console.log( "Mid - Controller" );
                    }
                    function link( $scope, element, attributes, controller ) {
                        console.log( "Mid - Link" );
                    }
                    // Return directive configuration.
                    return({
                        controller: Controller,
                        link: link
                    });
                }
            );
            // -------------------------------------------------- //
            // -------------------------------------------------- //
            // I demonstrate the timing of directive execution.
            app.directive(
                "bnSecondMid",
                function() {
                    function Controller( $scope ) {
                        console.log( "Second Mid - Controller" );
                    }
                    function link( $scope, element, attributes, controller ) {
                        console.log( "Second Mid - Link" );
                    }
                    // Return directive configuration.
                    return({
                        controller: Controller,
                        link: link
                    });
                }
            );
            // -------------------------------------------------- //
            // -------------------------------------------------- //
            // I demonstrate the timing of directive execution.
            app.directive(
                "bnInner",
                function() {
                    function Controller( $scope ) {
                        console.log( "Inner - Controller" );
                    }
                    function link( $scope, element, attributes, controller ) {
                        console.log( "Inner - Link" );
                    }
                    // Return directive configuration.
                    return({
                        controller: Controller,
                        link: link
                    });
                }
            );
        </script>
    
    </body>
    </html>
    

      

    Before we look at the console output, take note that there are two "mid" branches. This means that AngularJS has two branches to explore before it can fully walk back up to the top DOM node. That said, when we do run the above code, we get the following console log output:

    Outer - Controller
    Mid - Controller
    Inner - Controller
    Inner - Link
    Mid - Link
    Second Mid - Controller
    Second Mid - Link
    Outer - Link

    As you can see, as AngularJS walks the DOM tree, it instantiates the directive controllers on the way down; then, it links the directives on the way back up.

    This is an important difference. While you can only access the DOM tree in the bottom-up linking phase, the directive controller can provide a hook into the top-down lifecycle. This can be critical if you have to handle DOM events based on when elements of the DOM tree came into existence. The linking phase can never give you that because it's executed in reverse.

  • 相关阅读:
    Redis教程16-服务器
    剑指 Offer 21. 调整数组顺序使奇数位于偶数前面
    剑指 Offer 18. 删除链表的节点
    剑指 Offer 16. 数值的整数次方
    通过GetLastError 获取win32 api 的错误信息
    Windows API 错误码
    VS2012程序打包部署详解
    C#中子类调用父类的实现方法
    获取有关编程语言的帮助?
    Windows API 错误码解析
  • 原文地址:https://www.cnblogs.com/oxspirt/p/9266168.html
Copyright © 2011-2022 走看看