最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Understanding how directive priority level work in Angularjs - Stack Overflow

programmeradmin0浏览0评论

app.js is:

var app = angular.module('myApp',[]);
app.directive('myDirective2', function () {
    return{
        restrict: 'A',
        priority: 100,
        //template:"<h1>myDirective2</h1>",
        controller: function ($scope, $element, $transclude,$timeout) {
            //$scope.name = "executed myDirective2";
            $timeout(function () {
                $scope.name = "executed myDirective2";
            }, 3000);
        }
    };
});

app.directive('myDirective3', function () {
    return{
        restrict: 'A',
        priority: 200,
        //template:"<h1>myDirective3</h1>",
        controller: function ($scope, $element, $transclude, $timeout) {
            $timeout(function () {
                $scope.name = "executed myDirective3";
            }, 3000);
        }
    };
});

And index.html is:

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script src="js/angular.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>
    </head>
    <body>

        <div my-directive3 my-directive2></div>
        <br/>
        Name:{{name}}

    </body>
</html>

Though priority for my-directive2 is lesser than my-directive3 still why my-directive2 is getting executed? Should not it be the directive with higher priority which in this case is my-directive3?

app.js is:

var app = angular.module('myApp',[]);
app.directive('myDirective2', function () {
    return{
        restrict: 'A',
        priority: 100,
        //template:"<h1>myDirective2</h1>",
        controller: function ($scope, $element, $transclude,$timeout) {
            //$scope.name = "executed myDirective2";
            $timeout(function () {
                $scope.name = "executed myDirective2";
            }, 3000);
        }
    };
});

app.directive('myDirective3', function () {
    return{
        restrict: 'A',
        priority: 200,
        //template:"<h1>myDirective3</h1>",
        controller: function ($scope, $element, $transclude, $timeout) {
            $timeout(function () {
                $scope.name = "executed myDirective3";
            }, 3000);
        }
    };
});

And index.html is:

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script src="js/angular.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>
    </head>
    <body>

        <div my-directive3 my-directive2></div>
        <br/>
        Name:{{name}}

    </body>
</html>

Though priority for my-directive2 is lesser than my-directive3 still why my-directive2 is getting executed? Should not it be the directive with higher priority which in this case is my-directive3?

Share Improve this question asked Oct 16, 2015 at 22:23 user4904589user4904589 5652 gold badges5 silver badges15 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 16

Priority is a number for which directive gets executed first in case of multiple priorities. Basically you use it to determine the order of execution, not to exclude other directives.

Directives with greater numerical priority are compiled first. Pre-link functions are also run in priority order, but post-link functions are run in reverse order. The order of directives with the same priority is undefined. The default priority is 0.

You can read more about it here.

发布评论

评论列表(0)

  1. 暂无评论