AngularJS - Priority in Directives

Learn How/When to use priority option in AngularJS Directive

by Bala_chandran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div style='padding:100px;' ng-controller='test'>
    <div primary btn>The Hitchhiker’s Guide to the Directive Demo</div>
</div>

JavaScript

var App = angular.module('App', []);

App.controller('test',['$scope',function($scope){
}]);
App.directive('btn', function ($timeout) {
    return {
        restrict: 'A',
        priority: 1,
        link: function (scope, element, attrs) {
            console.log("Test btn");
            alert(scope.test);
            //element.addClass('btn');
        }
    };
});

App.directive('primary', function ($http) {
    return {
        restrict: 'A',
        priority: 2,
        link: function (scope, element, attrs) {
            console.log("Test primary");
             scope.test=10;
             scope.test*= scope.test;
           // if (element.hasClass('btn')) {
               // element.addClass('btn-primary');
            //}
        }
    };
});