快捷導(dǎo)航

AngularJS中directive指令使用之事件綁定與指令交互用法示例

更新時間：2016年11月22日 11:42:22 作者：栁羅風(fēng)塵

這篇文章主要介紹了AngularJS中directive指令使用之事件綁定與指令交互用法,結(jié)合實(shí)例形式分析了directive指令在模板的使用，事件的綁定及元素、屬性、控制器之間的交互相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS中directive指令使用之事件綁定與指令交互用法。分享給大家供大家參考，具體如下：

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('myapp',[]);
    /*=======================1. 模板的使用 ========================*/
    app.directive('who',function(){
      return {
        restrict:"E",       //元素element 的意思
        link:function(scope,element,attrs){
          console.log(element);
          element[0].innerHTML = 'sdfhkj'; //這個優(yōu)先級別最高
        },
        //templateUrl:"param.html", //這個不顯示 優(yōu)先級別最低
        template:"<h1>jkdhf</h1>" //這個顯示 優(yōu)先級別其次
      };
    });
    /*=======================2. 事件的綁定 ========================*/
    app.directive('youBtn',function(){
      return {
        restrict:"A", //attribute 屬性的意思
        link:function(scope,element,attrs){
          console.log(element);
          element[0].innerHTML = 'my btn';
          //事件綁定
          element.bind('mouseenter',function(){
            element[0].innerHTML = 'your btn';
          });
          element.bind('mouseleave',function(){
            element[0].innerHTML = 'her btn';
          });
        }
      };
    });
    /*=======================3. 元素 屬性 控制器之間的交互========================*/
    app.controller('ShieldController',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('reigns',function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addReigns();
       }
     };
    })
    .directive('rollins',function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addRollins();
       }
     };
    })
    .directive('ambros',function(){
     return {
       require:"theshield",
       link:function(scope,element,attrs,ShieldController){
         ShieldController.addAmbros();
       }
     };
    })
    .directive('theshield',function(){
      return {
        restrict:"E",
        controller:"ShieldController", //指定控制器
        scope:{},           //清空該指令處的$scope 值
        link:function(scope,element,attrs){
          element.bind('mouseenter',function(){ //對于該指令所對應(yīng)的元素綁定對應(yīng)的事件
            console.log(scope.shieldNames);
          });
        }
      };
    });
  </script>
</html>

希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: