describe all the api properties of directives and dom manipulation

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