Detailed Explanation of AngularJS Directives and Example Code

　　Background Introduction

　　This example is an example in the video, there is a Dynamic Superman with three abilities: strength, speed, and light.

　　These three abilities are defined as three attributes, defining Dynamic Superman as a tag, just by adding the corresponding attributes, you can have the ability.

　　To facilitate the display of results, mouse response events are added to the tag. When the mouse moves over the corresponding tag, a method is triggered, printing out the abilities possessed.

　　Program Analysis
　　The code for the html part is as follows:　　　　　　　

 <div>
      <superman>nothing!</superman>
      <superman strength >strength!</superman>
      <superman strength speed >strength speed!</superman>
      <superman strength speed light >strength speed light!</superman>
    </div>

　　Let's see how to implement it. First, create a module as usual:

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

　　Based on this module, create a tag called superman, similar to the previous one.

myAppModule.directive("superman",function(){
        return{
          scope:{},
          restrict:'AE',
          transclude:true,
          template:"<div><div ng-transclude></div></div>",
          controller:function($scope){
            $scope.abilities = [];
            this.addStrength = function(){
              $scope.abilities.push("strength");
            };
            this.addSpeed = function(){
              $scope.abilities.push("speed");
            };
            this.addLight = function(){
              $scope.abilities.push("light");
            };
          },
          link:function(scope,element,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });

　　The difference here is that there is a controller attribute inside the method, which is not ng.-Instead of a controller like this, it is an interface opened by the command for external use. The methods declared inside can be used as public methods externally, and other commands can use these methods through dependencies.

　　Next, create three commands corresponding to the three abilities.

    myAppModule.directive("strength",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addStrength();
          }
        }
      });
      myAppModule.directive("speed",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addSpeed();
          }
        }
      });
      myAppModule.directive("light",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addLight();
          }
        }
      });

　　The code for the three commands is quite similar, among which the require command specifies the dependent commands.

　　An additional parameter called supermanCtrl has been added to the link. It is conjectured that this parameter is the controller in superman, hence the name superman is used.+Ctrl mode.

　　Due to the lack of understanding of the internal principles, this is just a conjecture, but experiments have proven that if the name of this parameter is changed, an error will occur.

　　By declaring these three directives, these three directives can be used as properties of super. When the property is specified, it triggers the internal link method, calling the public methods in superman.　　

　　In summary, the interaction process of directives:

　　1 Firstly, create a basic directive and add public methods after the controller attribute.

　　2 To create other interactive directives, add the corresponding directive dependencies after the require attribute; call the public methods in the link.

　　All program 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>
    <div>
      <superman>nothing!</superman>
      <superman strength >strength!</superman>
      <superman strength speed >strength speed!</superman>
      <superman strength speed light >strength speed light!</superman>
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);
      myAppModule.directive("superman",function(){
        return{
          scope:{},
          restrict:'AE',
          transclude:true,
          template:"<div><div ng-transclude></div></div>",
          controller:function($scope){
            $scope.abilities = [];
            this.addStrength = function(){
              $scope.abilities.push("strength");
            };
            this.addSpeed = function(){
              $scope.abilities.push("speed");
            };
            this.addLight = function(){
              $scope.abilities.push("light");
            };
          },
          link:function(scope,element,attr){
            element.bind("mouseenter",function(){
              console.log(scope.abilities);
            });
          }
        }
      });
      myAppModule.directive("strength",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addStrength();
          }
        }
      });
      myAppModule.directive("speed",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addSpeed();
          }
        }
      });
      myAppModule.directive("light",function(){
        return{
          require:'^superman',
          link:function(scope,element,attr,supermanCtrl){
            supermanCtrl.addLight();
          }
        }
      });
    </script>
  </body>
</html>

　Running Result:

　　　　　　　 This is the compilation of the interaction of AngularJS directives. We will continue to supplement relevant materials in the future, thank you all for your support to this site!

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 liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When reporting, please replace # with @) to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial