Examples of event binding and instruction interaction usage using directive directives in AngularJS-JS Tutorial-php.cn

Examples of event binding and instruction interaction usage using directive directives in AngularJS

高洛峰

Release： 2016-12-24 09:52:50

Original

1561 people have browsed it

The example in this article describes the event binding and instruction interaction usage of directive instructions in AngularJS. Share it with everyone for your reference, the details are as follows:

The use of templates, event binding and the interaction between instructions in AngularJS

<!doctype html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8"/>
  </head>
  <body ng-controller="ShieldController">
    <div>
      <who></who>
    </div>
    <div>
      <button you-btn></button>
    </div>
    <theshield reigns>343</theshield>
    <theshield reigns>fdhg</theshield>
    <theshield rollins>hhh</theshield>
    <theshield ambros>kkk</theshield>
  </body>
  <script src="./js/angular.min.js"></script>
  <script>
    var app = angular.module(&#39;myapp&#39;,[]);
    /*=======================1. 模板的使用 ========================*/
    app.directive(&#39;who&#39;,function(){
      return {
        restrict:"E",       //元素element 的意思
        link:function(scope,element,attrs){
          console.log(element);
          element[0].innerHTML = &#39;sdfhkj&#39;; //这个优先级别最高
        },
        //templateUrl:"param.html", //这个不显示 优先级别最低
        template:"<h1>jkdhf</h1>" //这个显示 优先级别其次
      };
    });
    /*=======================2. 事件的绑定 ========================*/
    app.directive(&#39;youBtn&#39;,function(){
      return {
        restrict:"A", //attribute 属性的意思
        link:function(scope,element,attrs){
          console.log(element);
          element[0].innerHTML = &#39;my btn&#39;;
          //事件绑定
          element.bind(&#39;mouseenter&#39;,function(){
            element[0].innerHTML = &#39;your btn&#39;;
          });
          element.bind(&#39;mouseleave&#39;,function(){
            element[0].innerHTML = &#39;her btn&#39;;
          });
        }
      };
    });
    /*=======================3. 元素 属性 控制器之间的交互========================*/
    app.controller(&#39;ShieldController&#39;,function($scope){
      $scope.shieldNames = [];
      this.addReigns = function(){
        $scope.shieldNames.push("reigns:jjj");
      }
      this.addRollins = function(){
        $scope.shieldNames.push("Rollins:hhh");
      }
      this.addAmbros = function(){
        $scope.shieldNames.push("Ambros:ggg");
      }
    })
    .directive(&#39;reigns&#39;,function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addReigns();
       }
     };
    })
    .directive(&#39;rollins&#39;,function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addRollins();
       }
     };
    })
    .directive(&#39;ambros&#39;,function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addAmbros();
       }
     };
    })
    .directive(&#39;theshield&#39;,function(){
      return {
        restrict:"E",
        controller:"ShieldController", //指定控制器
        scope:{},           //清空该指令处的$scope 值
        link:function(scope,element,attrs){
          element.bind(&#39;mouseenter&#39;,function(){ //对于该指令所对应的元素绑定对应的事件
            console.log(scope.shieldNames);
          });
        }
      };
    });
  </script>
</html>

Copy after login

I hope this article will be helpful to everyone in AngularJS programming.

For more related articles on event binding and instruction interaction usage examples of directive instructions in AngularJS, please pay attention to the PHP Chinese website!