TechQA.

Does an element has a scope in the pre link phase?

107 views Asked by At

I've been told that pre link phase is executing before a scope linked to the DOM element, and post link is after the DOM element been linked. Then I did an experiment: I set a 'debugger' in pre link function, navigated to my angularjs web page, when the page stopped in this breakpoint, I ran this command 'angular.element($0).scope()' in the chrome console, surprisingly I got an available scope object, not null or undefined. I thought this outcome should be in post link instead of pre link. I'm really confused, can anyone explain it to me? p.s. I'm sure $0 is exactly what I want.

angularjs scope directive
Original Q&A
1

There are 1 answers

0
Tony On

Fine, I figured it out by myself. Pre link means it will be executed before any child elements execute link function that contains another directive, and the point is "child elements", not the element itself. For example:

    <body ng-app="app">
        <div data-dir1></div>
    </body>

JS:

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>'
        }
    });

angular.element('#div1') has a scope which is $rootScope, and when the codes run to pre link phase, angular.element('#btn1') also has this $rootScope in this moment, but after the link phase in dir2, its scope will become an isolated scope which is no longer $rootScope but a new $scope. Every element will have a scope as long as be included in a "ng-app" element, so angular.element($0).scope() always returns an available scope object.

Related Questions in ANGULARJS

Related Questions in SCOPE

Related Questions in DIRECTIVE

Popular Questions

Trending Questions