HG2D - Priority in Directive

Learn How/When to use priority option in AngularJS Directive

by gogirl

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;'>
  <div primary btn>The Hitchhiker’s Guide to the Directive Demo</div>
    
</div>
<div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
      <span><b>Selected Node</b> : {{currentNode.roleName}}Wijmo has extensive support for input widgets, including a powerful auto-complete/combobox, inputdate, inputnumber, inputmask, checkbox, radio, and slider. This page was built using directives based on these widgets.</span>
    </div>

JavaScript

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

App.directive('btn', function($timeout) {
  return {
    restrict: 'A',
    priority: 1,
    link: function(scope, element, attrs) {
      element.addClass('btn');
    }
  };
});

App.directive('primary', function($http) {
  return {
    restrict: 'A',
    priority: 0,
    link: function(scope, element, attrs) {
      if (element.hasClass('btn')) {
        element.addClass('btn-primary');
      }
    }
  };
});