Angular js Custom Directive | Code By Topic

Angular js Custom Directive

On By
Angular Js Directive
Here we discuss angular js custom directive.In angular js directive is one of the main feature. There are lots of angular js inbuild directive like ng-model,ng-hide,ng-show etc and we use it on our project everyday. But question is how to make my own directive in angular js. Good thing is angular js allow you to extend this.If you learning angualr js then you have to good knowledge of angular directive. Angualr js support to create custom directive for following type of elements as well as tags.I called these shortly EACM where E stand for element A stand for Attribute C stand for class and last M stand for comment. Here we discuss all this one by one
1. Element (E) : If we restrict custom directive with Element then directive execute only when a matching element is encountered.
2. Attribute (A): Only execute when a matching attribute is encountered.
3. Class (C): Directive execute only when a matching class is encoutered.
4. Comment (M): Directive execute only when a matching comment is encoutered.

Angular js Directive

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<custom-directive></custom-directive>
<div custom-directive></div>
<script>
    var app = angular.module("myApp", []);
    app.directive("customDirective", function () {
        return {
            restrict: "A",
            template: "<h4>Restict the directive with attribute restiction!</h4>If you execute this programm then custom-directive which is element is not execute because we restrict with attribute "
        };
    });
</script>
</body>
</html>

Explanation & Enhancement

Suppose if you put two are more than two restrict like restrict:"AC" then its restrict for attribute as well as class also. In this article i will  soon update how to call function inside custom directive.
link: function (scope, element, attrs) { element.on("click", ".member-link", function () { }); }
Like This Post? Please share!

You May Also Like...

1 comment:

  1. Hendrik Friedheim18 May 2018 at 17:12


    I've been browsing online more than 4 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all site owners and bloggers made good content as you did, the internet will be much more useful than ever before. paypal login my account

    ReplyDelete