This document summarizes key aspects of AngularJS directives including: 1. A basic directive example is shown using restrict, link and directive registration. 2. The directive definition object API is described including properties like priority, scope, restrict, template and link. 3. Priority determines the order directives are run, with lower priority run last for compile and prelink, but opposite for postlink. 4. Scope can be false, true or an object to define isolate scope variables and bindings.

1. Basics of
Angularjs Directive
- VIJAYKANI E

2. Directive Example
Var definitionObject = {
restrict : ‘EA’,
Link: function(scope, element, attrs){
element.text(‘Hello Directive World’);
}
};
App.direcitive(‘bbHelloWorld’, function(){
return definitionObject;
})
<bb-hello-world></bb-hello-world>

3. Directive Definition Object API
 Priority
 Terminal
 Scope
 Controller
 Require
 ControllerAs
 Restrict
 Template
 TemplateUrl
 Replace
 Transclude
 Compile
 Link

4. Priority
 The priority integer is used when multiple directives are set on the same
element
 Angularjs collects all of the known directives on an element and runs each
directive’s compile, prelink and postlink functions in a given order
 Lower Priority compile and prelink functions are run last, however postlink
is opposite.
 The default value is ZERO.
 NEGATIVE values are allowed in case directives need to be compiled after
default directives.

5. Terminal
 The priority integer is used when multiple directives are set on the same
element
 Angularjs collects all of the known directives on an element and runs each
directive’s compile, prelink and postlink functions in a given order
 Lower Priority compile and prelink functions are run last, however postlink
is opposite.
 The default value is ZERO.
 NEGATIVE values are allowed in case directives need to be compiled after
default directives.

6. Scope
 The priority integer is used when multiple directives are set on the same
element
 Angularjs collects all of the known directives on an element and runs each
directive’s compile, prelink and postlink functions in a given order
 Lower Priority compile and prelink functions are run last, however postlink
is opposite.
 The default value is ZERO.
 NEGATIVE values are allowed in case directives need to be compiled after
default directives.

7. SCOPE
1. The child scope
2. The isolate scope

8. Scope
 There is a specific syntax that is used to create the following three possible
options for the scope of a directive:
I. False/default: This is to use the defining/containing scope as the
directives own scope
II. True: This is to create a new scope, which prototypically inherits from the
defining/containing scope
III. Object hash: This is to create an isolate scope (the hash defines the
details of the scope)

9. Scope : isolate scope
 The following code snippets shows scope variables:
 // String representation of a defining scope's variables Javascript: Scope:
{'name': '@'}
HTML : <div bb-stop-watch name=“[[ localName}}”></div>
 // An expression executed on the defining scope Javascript: Scope: {'name'
: '&'}
HTML : <div bb-stop-watch name=“newName = localName + ‘ ha
ha’”></div>
 // Two Way Data Binding JavaScript: Scope:
{'name': '='}
HTML : <div bb-stop-watch name=“localName”></div>

10. Restrict
 Restrict: 'A' – This option represents the directive that is an attribute of the
element (default), which implies that Angular is looking for
 Restrict: 'E' – This option represents the directive that is an element, which
implies that Angular is looking for
 Restrict: 'C' – This option represents the directive that is a class definition,
which implies that Angular is looking for
 Restrict: 'M' – This option represents the directive that is a comment, which
implies that Angular is looking for