詳解angularjs中如何實現(xiàn)控制器和指令之間交互

更新時間：2017年05月31日 14:07:52 作者：liangklfang

本篇文章主要介紹了詳解angularjs中如何實現(xiàn)控制器和指令之間交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下

如果我們具有下面的DOM結構：

  <div ng-controller="MyCtrl"> 
   <loader>滑動加載</loader> 
</div>

同時我們的控制器具有如下的簽名：

var myModule = angular.module("MyModule", []); 
//首先定義一個模塊并在模塊下掛載控制器，第二個參數(shù)為一個數(shù)組，其中函數(shù)前面的參數(shù)都是會被注入到函數(shù)形參上面的 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
  $scope.loadData=function(){ 
    console.log("加載數(shù)據(jù)中..."); 
  } 
}]);

同時指令的簽名如下：

myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind('mouseenter', function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意這里的坑，howToLoad會被轉換成小寫的howtoload 
      }); 
    } 
  }  
});

這時候我們的指令通過scope.loadData或者scope.$apply就可以完成對控制器的調用了。但是如果我們具有兩個控制器呢?而且兩個控制器中$scope中方法是不同的?

var myModule = angular.module("MyModule", []); 
//首先定義一個模塊并在模塊下掛載控制器，第二個參數(shù)為一個數(shù)組，其中函數(shù)前面的參數(shù)都是會被注入到函數(shù)形參上面的 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
  $scope.loadData=function(){ 
    console.log("加載數(shù)據(jù)中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加載數(shù)據(jù)中...22222"); 
  } 
}]);

這時候在我們的指令中如何調用方法呢，按照上面的方式的話那么那么就會面臨問題：MyCtrl2沒有我們的loadData，而只有l(wèi)oadData2!這時候我們就需要使用后面的指令自定義屬性了!

我們定義了兩個controller控制器，分別為MyCtrl,MyCtrl2,這兩個控制器都使用了我們自己定義的指令load:

<!doctype html> 
<html ng-app="MyModule"> 
  <head> 
    <meta charset="utf-8"> 
  </head> 
  <body> 
  <!--第一個控制器MyCtrl--> 
    <div ng-controller="MyCtrl"> 
      <loader howToLoad="loadData()">滑動加載</loader> 
    </div> 
    <!--第二個控制器MyCtrl2--> 
    <div ng-controller="MyCtrl2"> 
      <loader howToLoad="loadData2()">滑動加載</loader> 
    </div> 
  </body> 
  <script src="framework/angular-1.3.0.14/angular.js"></script> 
  <script src="Directive&Controller.js"></script> 
</html>

我們自定義了Controller代碼如下：

var myModule = angular.module("MyModule", []); 
//首先定義一個模塊并在模塊下掛載控制器，第二個參數(shù)為一個數(shù)組，其中函數(shù)前面的參數(shù)都是會被注入到函數(shù)形參上面的 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
  $scope.loadData=function(){ 
    console.log("加載數(shù)據(jù)中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加載數(shù)據(jù)中...22222"); 
  } 
}]); 
//在模塊下掛載一個loader指令 
myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind('mouseenter', function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意這里的坑，howToLoad會被轉換成小寫的howtoload 
        // scope.$apply(attrs.howtoload); 
        //其中scope為POJO，但是有一系列的工具方法如$watch,$apply等 
      }); 
    } 
  }  
});

很顯然這里有兩個控制器，分別為MyCtrl和MyCtrl2，我們的指令如何知道調用那一個Controller?這時候我們就需要為我們的指令指定不同的屬性，用這個屬性來判斷不同的controller調用，這樣我們的指令就可以在不同的controller中調用了!

總結：之所以定義指令就是為了復用，為了讓指令和不同的控制器進行交互就會為指令定義不同的配置項，這就是指令和控制器進行數(shù)據(jù)交互的原理之所在!

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: