AngularJS指令與控制器之間的互動功能樣本_AngularJS

本文執行個體講述了AngularJS指令與控制器之間的互動功能。分享給大家供大家參考，具體如下：

本節我們來看控制器與指令之間的互動

1.首先來看最簡單的，在指令中調用父控制器的方法：

<div ng-controller="myController1"></div>

app.controller('myController1',['$scope',function($scope){    $scope.load=function(){     console.log('正在載入資料......');    }}]);app.directive('myTest',function(){    return{      restrict:'E',      link:function(scope,ele,attr){        ele.bind('mouseenter',function(){          scope.load();        })      }    }})

在第一節中，我們已經知道了如何在指令的scope參數中調用父控制器中的方法，這裡的：

scope.load();

也可以寫成：

scope.$apply('load()');

2.同一個指令，在動態調用多個父類控制器中的方法：

<div ng-controller="myController1" loadMore="load1()"</div><div ng-controller="myController2" loadMore="load2()"></div>

app.controller('myController1',['$scope',function($scope){    $scope.load1=function(){     console.log('正在載入資料......');    }}]);app.controller('myController2',['$scope',function($scope){    $scope.load2=function(){    console.log('正在載入資料........');    }}]);app.directive('myTest',function(){    return{      restrict:'E',      link:function(scope,ele,attr){        ele.bind('mouseenter',function(){          scope.$apply(attr.loadmore())        })      }    }})

注意這裡：

scope.$apply(attr.loadmore());

loadmore是小寫，而在html中，屬性是通過駝峰法則得到的。

更多關於AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程式設計有所協助。