Categories: AngularJs

Directives – AngularJS

Using Directives you can extend HTML attributes. In AngularJS you can define your own directives while it has its own set of directives.
In angularJS, directives start with ng- prefix like ng-app, ng-init, ng-model etc.

[html]

Result: {{ a * b }}

[/html]

Using ng-bind:

[html]

[/html]

Data Binding in AngularJS:
Using ng-model directive it binds AngularJS expressions with AngularJS data.

Repeating nodes: ng-repeat directive is used to repeat HTML elements in AngularJS.

<span ng-app=”” ng-init=”states=[‘UP’,’MP’,’HYD’]”>
<ul>
<li ng-repeat=”a in states”>
{{ a }}
</li>
</ul>
</span>

ng-repeat creates complete HTML tag/node in which it is defined.

ng-app directive: ag-app directive define an AngularJS application. It shows starting point of application

ng-init: ng-init initialises application. It defines statrting values for AngularJS application.
ng-model: ng-model binds value of HTML controls to the application data.
ng-model is used to provie css classes to HTML.
ng-model binds HTML elements to forms.

Custom Directives:

.directive function is used to create new custom directives.

[html]

app.directive("customDirective", function() { return { template : "Hello directive..." }; });
[/html]

A directive can be invoked by using:

Attribute name

[html]
[/html]

or

Element name

[html]

[/html]

or

Class name

[html]

[/html]

or Comment

[html]

[/html]

Restrict property:

You can restrict invocation of the directive by using restrict property. Possible values are A,E,C,M

where A = Attribute, E = Element, C = Class and M = Comment.

For example:

[html]


[/html]

In above example, custom directive is supposed to invoked by class like

[html]
[/html]

other wise it would not work.

jeff77

Disqus Comments Loading...

Recent Posts

Noun

A Noun is the name of a person, place or thing. or Name of anything is noun. For example: Sita…

10 years ago

Introduction – AngularJS

Misko Hevery, a Google employee, developed AngularJS. First version 1.0 of AngularJS was released in 2012. Now AngularJS is fully…

9 years ago

Expressions – AngularJS

AngularJS expressions contain operators,literals, and variables.  AngularJS expressions can be written inside HTML while JavaScript expressions can't be.  AngularJS expressions…

9 years ago

Noun – Exercise

Some sentences are given below. Choose the nouns and mention the type of noun whether they are proper noun, common…

9 years ago

Modules – AngularJS

Modules are containers for appication controller. They contain different parts of an application. [html] {{ state + " " +…

9 years ago

Choose a Quiz

English Quizzes: English Noun Quiz – Set 1 English Noun Quiz – Set 2

9 years ago