AngularJS - Tutorial Custom Directives Day #3BYGeorge

AgendaPossible way to Call Directives

Directive TypesElement directivesAttribute directivesCSS class directivesComment directives

Possible way to Call DirectivesAngularJS even gives you other options for invoking directives with different name prefixesThese are all equivalent, as well:ng-*ng:*ng_*x-ng-*data-ng-*

To invoke a directive from HTML, we simply can apply the directive in the DOM. That is to say, we pick one of the four methods for invoking a directive:

As an attributeAn attribute directive is activated when AngularJS finds a matching HTML element attribute

As a classA CSS class directive is activated when AngularJS finds a matching CSS Class

As an elementAn element directive is activated when AngularJS finds a matching HTML element in the HTML template

As a commentA comment directive is activated when AngularJS finds a matching HTML comment.

first, basic directiveCall to the directive() function on the module

When you call this function you can register a new directive.

Restrict option There are four different ways to invoke a directive, so there are four valid options for restrict:

The restrict option can specify multiple options

TemplateThis template is an inline template where we are specifying the html that will be appended

This is particularly useful when we want to share directives across apps and you only want to pass a single file around.

TemplateUrlIf you prefer to load a template over ajax, you can specify the templateUrl option, which will use ajax to pull the template.

compile & link functioncompile function is called only once when the directive is initilaized

link function is acitve always - whenever the scope changes the link function is refreshed

compile function is run and is expected to return a link() function

The $compile() function will return a linking function that wraps all of the containing DOM elements directives' linking functions. Well use the link function to register all listeners on a specific DOM element

Why have a compile and link function?The answer is for performance

Its slow to compile and interpolate against scopes every time a new directive of the same type is created

Require optionWell enforce that we need this dependency by setting the require option:

Now, if we invoke the directive on the page without the ng-model directive, our browser will complain and throw an error. To invoke our directive now, we simply have to add the ng-model directive:

Notice, in the require option, we prefixed the controller with a ^. AngularJS gives you two options in the require option about how to declare requirements with a prefixed character:

ScopeJust like in every other part of AngularJS DOM control, directives can be given their own scopes.

AngularJS gives you the ability to isolate the scope of the directive from the rest of the page using the scope option.

The scope option can take one of two different options. It can be set to true (its false by default).

Scope : False ( Directive uses its parent scope )When scope is set to false, the controller Ctrl1 and directive are using the same scope object. This means any changes to the controller or directive will be in sync.

fiddle : http://jsfiddle.net/shidhincr/eyNYw/4/light/

Scope : True ( Directive gets a new scope )When scope is set to true, AngularJS will create a new scope by inheriting parent scope

fiddle : http://jsfiddle.net/shidhincr/q3kex/3/light/

Scope : { } ( Directive gets a new isolated scope )This time, there will be a new scope created for the directive, but it will not be inherited from the parent scope. This new scope also known as Isolated scope because it is completely detached from its parent scope.

fiddle: http://jsfiddle.net/shidhincr/q3kex/4/light/

Isolated scope with Data bindingcan we pass some values from the parent scope to the directives now?

Yes ! Not only that, we might need to handle situations like invoking callbacks in parent scope, two-way binding between parent & directives scope ..etc

fiddle : http://jsfiddle.net/shidhincr/pJLT8/10/light/

Scope Data bindingLocal scope property(One-way-binding)

Binding a local scope (string) to the value of the DOM attribute

Bi-directional binding

Parent execution binding(call function from parent controller)

Scope Data binding

Directive Controller

Transclude option

http://jsfiddle.net/anglee/StnqM/

Replace optionreplace: true means that the content of the directive template will replace the element that the directive is declared on.

When replace: true, the template or templateUrl must be required.

http://jsfiddle.net/cw773/

Assigenments