Wednesday, 20 February 2013

Developer Diary - AngularJS: Writing Directives

Continuing the AngularJS research, I have written a summary of this video on Writing Directives:

Compile vs Link Functions

  • The compile function:
    • has no access to the scope
    • called once only
    • accesses the template and modifies it
    • contains common elements that is in all instances
  • The link function:
    • has access to the scope
    • called per instance
      • i.e. n times for a n-object repeater
    • links template instances to the scope
  • An object orientated analogy is that:
    • compile works on the template "class"
    • link works on the template "object" (instances)

Updating Angular

  • When updating the scope outside of the Angular world, you need to inform Angular of the change (so that Angular updates the UI).
      1. $scope.$apply(function doStuff() {  
      2.     // do stuff that updates the scope  
      3.  });  
  • Within the "doStuff" function, you can use parameters via $parse
      1. // parse returns a "class" which has functions to read/write to the given scope parameter.  
      2. $parse("paramterName")  
      3.     .assign(scope, value);  
  • Outside the Angular world typically means calling jQuery, handling non-angular events, etc. from inside a directive.


  • Directives should ideally have isolated scopes for better encapsulation
  • These scopes can also inherit and interact with a parent scope
    • This is achieved through using "@", "=" and "&" symbols....
      • Not 100% on how it works exactly, but found information on it here:
      • '@' seems to copy the given value from parent scope
      • '=' forms a bi-directional relationship between the directive scope and parent scope
      • '&' is a bit of an enigma to me, I don't quite get it....
        • "provides a way to execute an expression in the context of the parent scope"???


  • Transclusion can be used to nest directives/components
    • This could potentially be used to nest views
    • To do this, the transclude flag needs to be true
    • The position where the transcluded stuff is located is specified with the "ng-transclude" attribute.
  • A transcluded component is given a specific scope
    • This scope is a sibling to the scope of the directive it is contained in.
      • This ensures the transcluded component's scope is enscapsulated away from the directive's scope and visa versa.
    • The transcluded component's scope and the directive's scope share the same parent.
      • Typically this parent is the controller's scope.

No comments:

Post a Comment