Developer Diary - AngularJS: Writing Directives

Continuing the AngularJS research, I have written a summary of this video on Writing Directives:
http://www.youtube.com/watch?v=WqmeI5fZcho

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.

Scopes

• 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: http://docs.angularjs.org/guide/directive
    • '@' 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

• 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.