AngularJS Custom Directive Detailed Explanation and Example Code

AngularJS supports custom tag attributes, and adds custom content without using DOM node operations.

As mentioned earlier, the four major features of AngularJS are:

　　1 MVC

　　2 Modularization

　　3 Directives

　　4 Two-way data binding

The following content will be introduced:

　　1 How to customize directives

　　2 Usage of custom directives

　　3 Nested usage of custom directives

　　How to customize directives:

　　Angular is a module-based framework, so it is definitely necessary to create your own module:

var myAppModule = angular.module("myApp",[]);

　　Then create a directive directive on the basis of this module　　　　　　

 myAppModule.directive("xingoo",function(){
    return{
     restrict:'AECM',
     template:'<div>hello my directive</div>',
     repalce:true
    }
   });

　　Among them, xingoo is the name of our custom tag, followed by its method function.

　　The function returns a key-value pair combination, which defines the usage method, attributes, and other content of the tag.

　　Then let's see what it has defined:

　　1 restrict: Defines the usage method of the tag, a total of four, namely AECM

　　2 template: Defines the template of the tag. It is a string used to replace the custom tag.

　　3 repalce: Whether to support replacement

　　4 transclude: Whether to support nesting

　　How to use directives:

　　The four mentioned usage methods of tags are AECM.

　　A attribute attribute: Use as attributes

　　E element element: Use as tag elements

　　C class class: Use as CSS styles

　　M comments comments: Use as comments (this method is1.2The version tested and found to be unusable!)

!-- directive:xingoo -->
<div></div>

　　Generally speaking, it is recommended to use it as both an attribute and an element.

　　When you want to extend attributes on existing HTML tags, use the attribute form.

　　When you want to customize tags, use the tag form.

　　To use the desired method, you must declare the corresponding letter in the restrict of the directive definition.　

　　Directive nested usage:

　　Because tags can nest other tags internally, to nest other element tags in custom tags, you need to:

　　1 Use the transclude attribute and set it to true.

　　2 And use ng-The transclude attribute defines the internal nested position.

　　The code is as follows:　　　　　　

  myAppModule.directive("test",function(){
    return{
     restrict:'AECM',
     transclude:true,
     template:"<div>haha! <div ng-transclude>/div> wuwu!/div>
    }
   });

　　All Code

!doctype html
<html ng-app="myApp">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
 </head>
 <body>
  <xingoo></xingoo>
  <div xingoo></div>
  <div class="xingoo"></div>
  !-- directive:xingoo -->
  <div></div>
  <hr>
  <xingoo>3333</xingoo>
  <hr>
  <test>4444</test>
  <script type="text/javascript">
   var myAppModule = angular.module("myApp",[]);
   myAppModule.directive("xingoo",function(){
    return{
     restrict:'AECM',
     template:'<div>hello my directive</div>',
     repalce:true
    }
   });
   myAppModule.directive("test",function(){
    return{
     restrict:'AECM',
     transclude:true,
     template:"<div>haha! <div ng-transclude>/div> wuwu!/div>
    }
   });
  </script>
 </body>
</html>

　　Running Result

This is the material collection of AngularJS custom directives. We will continue to supplement relevant materials in the future, thank you all for your support to this website!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report abuse by replacing # with @ in your email and providing relevant evidence. Once verified, the website will immediately delete the infringing content.

Basic Tutorial