Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Understanding Directives in AngularJS

    • 0
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 177
    Comment on it

    Directives are the important components of any Angular JS application. Although there are many directives built in angularjs, we often need to create application specific directives i.e. Custom directives. AngularJS directives are extended HTML attributes and starts with -ng.

    These are few AngularJS directives:

    ng-app initializes an angularJS apllication.
    ng-init initializes application data.
    ng-model binds values of HTML controls like input, textarea, select to application data.
    ng-repeat repeats an HTML element.

    Example-1

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

    Example-2

    <div ng-app="" ng-init="names=['Chris','Harry','Stephen']">
      <ul>
        <li ng-repeat="x in names">
          {{ x }}
        </li>
      </ul>
    </div>
    

    Custom Directives
    It can be of following types:
    1. A new HTML element(E)
    2.An attribute on element(A)
    3.As a Class(C)
    4.As a Comment(M)

    Example

     var app = angular.module('myapp', []);
         app.directive('hello', function() {
              return {
                  restrict: 'AE',
                  replace: 'true',
                  template: '<h3>Hello there!!!!</h3>'  };
            });
    

    In the above example there is code for directive hello. The app.directive() function registers a new directive in our module. The first argument to this function is directive name and the second argument is a function which returns a directive definition object. If directive has dependencies on external objects/services like $rootScope, $http, or $compile, they can be injected here. This directive can be used in html as an element or attribute or class like this.

    <hello></hello>
    

    or

    <div hello></div>
    

    or

    <div class="hello"></div>
    

    We have used these properties in directive definition object to configure directive.

    restrict: This defines how a directive can be used as an html. In this case we have given it to AE that means the directive can be used as an html element or attribute.

    template: This defines the HTML markup that will be generated when the directive is compiled and linked by Angular. This can not be a simple string. It can be complex, often involving other directives, expressions ({{ }}), etc. In most cases you want to use templateUrl instead of template. So, ideally you should place the template in a separate HTML file and make templateUrl point to it.

    replace: This specifies if the generated template will replace the HTML element on which the directive is attached. In the above case we have used the directive as , and replace is set to true. After the directive is compiled, the produced output template replaces . The final output is <h3>Hello there!!!</h3>. If you set replace to false, the default, the output template will be inserted into the element on which the directive is invoked.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: