Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create custom directives in angular js?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 97
    Comment on it

    As we know that there are also some built in directives provided by angular js. Apart from these we can also create our own custom directives by using .directive function. When we are naming a directive we must ensure that it should be in camel case name (myCustomDirective), but while envoking the directive we should must use '-' separated name (my-custom-directive). For example :

    <body ng-app="myTestDirectiveApp">
    
    <my-custom-directive></my-custom-directive><!--Invoking custom directive-->
    
    <script>
    var app = angular.module("myTestDirectiveApp", []);
    //Creating custom directive
    app.directive("myCustomDirective", function() {
        return {
            template : "<h1>Created using custom directive!</h1>"**strong text**
        };
    });
    </script>
    
    </body>
    

    We can call a directive by using:Element name, Attribute, Class and Comment. For Example:
    By Element Name:
    By Attribute:


    By Class :

    By Comment :

    Now we have understand that how we can create a custom directive. We can also add restrictions on our custom directives by using 'restrict' property and with legal predefined values like below. M - for comment
    A - for attribute
    E - for element
    C - for class

    Note : Default value of a custom directive is 'EA'.

    Example:

    <body ng-app="myTestDirectiveApp">
    
    <my-custom-directive></my-custom-directive><!--Invoking custom directive-->
    
    <script>
    var app = angular.module("myTestDirectiveApp", []);
    //Creating custom directive
    app.directive("myCustomDirective", function() {
        return {
            template : "<h1>Created using custom directive!</h1>",
        restrict : "E"
        };
    });
    </script>
    
    </body>
    

    Above code will create a element type directive.

 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: