元素在预链接阶段是否具有范围?

时间:2016-12-20 08:01:53

标签: angularjs scope directive

我被告知前链接阶段在链接到DOM元素的范围之前执行,而post链接在DOM元素链接之后。然后我做了一个实验:我在预链接功能中设置了一个'调试器',导航到我的angularjs网页,当页面停在这个断点时,我运行了这个命令'angular.element($ 0).scope()' Chrome控制台,令人惊讶的是我得到了一个可用的范围对象,而不是null或undefined。我认为这个结果应该是post link而不是pre link。我真的很困惑,任何人都可以向我解释一下吗?附:我确定0美元正是我想要的。

1 个答案:

答案 0 :(得分:0)

好吧,我自己想通了。预链接意味着它将在任何子元素执行包含另一个指令的链接函数之前执行,并且该点是"子元素"而不是元素本身。例如:



    <body ng-app="app">
        <div data-dir1></div>
    </body>
&#13;
&#13;
&#13;

JS:

&#13;
&#13;
app.directive('dir1', function(){
        return{
            restrict: 'A',
            template: '<div data-dir2 id="div1"></div>',
            compile: function(){
                return {
                    pre: function(){
                        debugger;
                    },
                    post: function(){
                    }
                }
            }
        }
    });
app.directive('dir2', function(){
        return{
            restrict: 'A',
            scope:{},
            template: '<button id="btn1">hi</button>'
        }
    });
&#13;
&#13;
&#13;

angular.element(&#39;#div1&#39;)的范围是$ rootScope,当代码运行到预链接阶段时,angular.element(&#39;#btn1&#39;)也目前有这个$ rootScope,但是在dir2的链接阶段之后,它的范围将变成一个孤立的范围,它不再是$ rootScope而是一个新的$ scope。 每个元素都有一个范围,只要包含在&#34; ng-app&#34; element,所以angular.element($ 0).scope()总是返回一个可用的范围对象。