AngularJS Directives

AngularJS allows you to use what is called "Directivesnew properties to extend HTML.

AngularJS has a set of built-in directives that can provide functionality to your application.

AngularJS also allows you to define your own instructions.

AngularJS Directives

AngularJS instructions are extended HTML attributes with a prefix ng-.

ng-app The instruction initializes the AngularJS application.

ng-init directive The instruction initializes application data.

ng-model Directives bind the value of HTML controls (input, select, textarea) to application data.

Please read more about all AngularJS instructions in our AngularJS directive reference.

instance

<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>

Try it yourself

ng-app the instruction also tells AngularJS that the <div> element is the 'owner' of the AngularJS application.

data binding

In the previous example, {{ firstName }} An expression is an AngularJS data binding expression.

Data binding in AngularJS binds AngularJS expressions with AngularJS data.

{{ firstName }} with ng-model="firstName" bound together.

In the next example, two text fields are bound together with two ng-model instructions:

instance

<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>

Try it yourself

Using ng-init directive is not common. You will learn how to initialize data in the chapter about controllers.

repeating HTML elements

ng-repeat Instruction for repeating HTML elements:

instance

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Try it yourself

ng-repeat the instruction actually clones each item in the collectionclone HTML elements once.

used for object arrays ng-repeat Instruction:

instance

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Try it yourself

AngularJS is very suitable for database CRUD (create, read, update, delete) applications.

Imagine if these objects are records from a database.

ng-app directive

ng-app ng-init defines theRoot element.

When the web page is loaded,ng-app Directives willAuto-bootstrap(auto-initialize) application.

ng-init directive

ng-init directive ng-init defines theInitial value.

Normally, you will not use ng-init. You will use controllers or modules instead.

You will learn more about controllers and modules later.

ng-model directive

ng-model Directives bind the value of HTML controls (input, select, textarea) to application data.

ng-model Directives can also:

  • Providing type validation (number, email, required) for application data
  • Providing states (invalid, dirty, touched, error) for application data
  • Providing CSS classes for HTML elements
  • Binding HTML elements to HTML forms

Read more about ng-model Information about the directive.

Create a new directive

In addition to all built-in AngularJS directives, you can also create your own directives.

New directives are created by using .directive created by a function.

To call a new directive, create an HTML element with the same tag name as the new directive.

When naming directives, you must use camelCase namingw3TestDirectiveHowever, when calling it, the name must be separated by a -w3-test-directive:

instance

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Made by a directive!</h1>"
  });
});
</script>
</body>

Try it yourself

You can call the directive in the following ways:

  • Element name
  • Attribute
  • Class
  • Comment

The following examples will produce the same result:

Element name

<w3-test-directive></w3-test-directive>

Try it yourself

Attribute

<div w3-test-directive></div>

Try it yourself

Class

<div class="w3-test-directive"></div>

Try it yourself

Comment

<!-- directive: w3-test-directive -->

Try it yourself

limit

You can limit your directive to be called only through certain methods.

instance

by adding a value of "A" of restrict attribute, the directive can only be called through attributes:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Made by a directive!</h1>"
  });
});

Try it yourself

The valid restrict values are:

  • E represents element name
  • A represents attribute
  • C represents class
  • M represents comments

The default value is EAThis means that both element names and attribute names can call directives.