Exemples d'utilisation de liaison d'événements et d'interactions d'instructions à l'aide de directives de directive dans AngularJS-js tutoriel-php.cn

Exemples d'utilisation de liaison d'événements et d'interactions d'instructions à l'aide de directives de directive dans AngularJS

高洛峰

Libérer： 2016-12-24 09:52:50

original

1521 Les gens l'ont consulté

L'exemple de cet article décrit l'utilisation de la liaison d'événements et de l'interaction avec les instructions des instructions de directive dans AngularJS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

L'utilisation de modèles, la liaison d'événements et l'interaction entre les instructions dans 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>

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui programment AngularJS.

Pour plus d'articles connexes sur les exemples d'utilisation de liaisons d'événements et d'interactions d'instructions d'instructions de directive dans AngularJS, veuillez faire attention au site Web PHP chinois !