Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS Directives

10,410 views

Published on

AngularJS Directives

Published in: Technology, Business

AngularJS Directives

  1. 1. <tabs> <pane title="Localization">...</pane> <pane title="Pluralization"> <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize> </pane> </tabs>
  2. 2. <span my-dir="exp"></span> <span class="my-dir:exp;"></span> <my-dir></my-dir> <!-- directive: my-dir exp --> Code
  3. 3. var app = angular.module("app", []); app.directive('copyright', function () { return { restrict: 'M', compile: function (element) { element.text('Copyright 2013 Eyal Vardi'); } }; }); <!-- directive: copyright --> <!-- Copyright 2013 Eyal Vardi -->
  4. 4. <div draggable>Hello</div> app.directive('draggable', function ($document) { var startX = 0, startY = 0, x = 0, y = 0; return function(scope, element, attr) { element.css({ position: 'relative', cursor: 'pointer' }); element.bind('mousedown', function(event) {...}); });
  5. 5. <script src="/Scripts/angular.min.js"></script> app.directive('importantBackgroundColor', function () { return { restrict: 'C', priority: -99999, // we want this to be run last // we don't use compile because we want to do this // at the last possible minute link: function (scope, element, attribs) { element.css('background-color', attribs.color); } }; });
  6. 6. myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, terminal: false, template: '<div></div>', templateUrl:'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, require: '^?ngModel' controller: function($scope, $element, $attrs, $transclude, Injectables) { ... }, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } }, link: function postLink(scope, iElement, iAttrs, controller) { ... } }; return directiveDefinitionObject; });
  7. 7. <div ng-controller="MyCtrl"> <ul> <li ng-repeat="n in names">{{n}}</li> </ul> </div> First the HTML is parsed into DOM using the standard browser API. Once all directives for a given DOM element have been identified they are sorted by priority and their compile() functions are executed. DOM + link($scope) Live binding between the scope and the DOM Register any listeners on the elements and set up any watches with the scope. var $compile = ...; // injected into your code var scope = ...; var html = '<div ng-bind="exp"></div>'; // Step 1: parse HTML into DOM element var template = angular.element(html); // Step 2: compile the template var linkFn = $compile(template); // Step 3: link the compiled template with the scope. var element = linkFn(scope); // Step 4: Append to DOM (optional) parent.appendChild(element);
  8. 8. <div directive1 directive2> <div directive3> Hello World... </div> </div> $compile start $compile end  Factory func  Template  Compile  Controller  preLink  postLink  Factory func  No Template  Compile  Controller  preLink  postLink  Factory func  Template  Compile  Controller  preLink  postLink
  9. 9. terminal <div directive1 directive2> <div directive3> Hello World... </div> </div> $compile start $compile end  Factory func  Template  Compile  Controller  preLink  postLink  Factory func  Factory func  Template  Compile  Terminal = true  Priority = 1001
  10. 10.  Factory func  Template  Compile  Controller  preLink  postLink <ul> <li ng-repeat="x in [1,2,3,4]" directive-name> {{x}} </li> </ul>
  11. 11. require: [ '^?ngModel', '^?Form']
  12. 12. function compile(tElement, tAttrs, transclude) { ... }
  13. 13. function link( scope, iElement, iAttrs, controller ) { ... }
  14. 14. function linkingFn(scope, elm, attrs, ctrl) { // get the attribute value console.log(attrs.ngModel); // change the attribute attrs.$set('ngModel', 'new value'); // observe changes to interpolated attribute attrs.$observe('ngModel', function(value) { console.log('ngModel has changed value to ' + value); }); }
  15. 15. childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output
  16. 16. childScope.aString = 'child string';childScope.aString = 'child string'; childScope.anArray[1] = '22'; childScope.anObject.property1 = 'child prop1'; This new property hides / shadows the parentScope property with the same name.
  17. 17. childScope.anArray = [100,555]; childScope.anObject = { name: 'Mark', country: 'USA' };
  18. 18. $scope.myPrimitive = 50; $scope.myObject = { aNumber: 11 }; <script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
  19. 19. $scope.myPrimitive = 77; $scope.myObject = { aNumber: 11 }; <script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
  20. 20. $scope.myPrimitive = 50; $scope.myObject = { aNumber: 99 }; <script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div> 99 50
  21. 21. <script type="text/ng-template" id="/tpl1.html"> <input ng-model="$parent.myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div> Typing (say, "22")
  22. 22. <my-directive interpolated ="Hello {{parentProp1}}" twowayBinding ="parentProp2" isolated-exp-foo ="updateFoo(newFoo)" > ... </my-directive> scope: { interpolatedProp: '@interpolated', // One-way Binding twowayBindingProp: '=twowayBinding', // Two-way Binding isolatedExpFooMeto: '&isolatedExpFoo' // Function Binding } // Option II scope: { interpolated: '@' , twowayBinding: '=' , isolatedExpFoo: '&' } Code local scope = DOM attribute local scope = parent scope execute an expression in the context of the parent scope
  23. 23. <div ng-controller="Ctrl3"> Title: <input ng-model="title"> <br> Text: <textarea ng-model="text"></textarea> <div class="zippy" zippy-title="Details: {{title}}">{{text}}</div> </div> angular.module('zippyModule', []) .directive('zippy', function () { return { restrict: 'C', replace: true, transclude: true, scope: { title: '@zippyTitle' }, template: '<div>' + '<div class="title">{{title}}</div>' + '<div class="body" ng-transclude></div>' + '</div>', link: function(scope, element, attrs) {...} }; }); Code
  24. 24. Code
  25. 25. AngularJS.org The Nuances of Scope Prototypal Inheritance AngularJS Sticky Notes Pt 2 – Isolated Scope Transclude in AngularJS

×