AngularJS指令與控制器之間的交互功能示例

更新時(shí)間：2016年12月14日 10:36:16 作者：小小小小小亮

這篇文章主要介紹了AngularJS指令與控制器之間的交互功能,結(jié)合實(shí)例形式分析了AngularJS控制器調(diào)用相關(guān)指令操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS指令與控制器之間的交互功能。分享給大家供大家參考，具體如下：

本節(jié)我們來看控制器與指令之間的交互

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

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

app.controller('myController1',['$scope',function($scope){
    $scope.load=function(){
     console.log('正在加載數(shù)據(jù)......');
    }
}]);
app.directive('myTest',function(){
    return{
      restrict:'E',
      link:function(scope,ele,attr){
        ele.bind('mouseenter',function(){
          scope.load();
        })
      }
    }
})

在第一節(jié)中，我們已經(jīng)知道了如何在指令的scope參數(shù)中調(diào)用父控制器中的方法，這里的：

scope.load();

也可以寫成：

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

2.同一個(gè)指令，在動(dòng)態(tài)調(diào)用多個(gè)父類控制器中的方法：

<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('正在加載數(shù)據(jù)......');
    }
}]);
app.controller('myController2',['$scope',function($scope){
    $scope.load2=function(){
    console.log('正在加載數(shù)據(jù)........');
    }
}]);
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中，屬性是通過駝峰法則得到的。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

移除AngularJS下URL中的#字符的方法
這篇文章主要介紹了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人氣JavaScript庫,需要的朋友可以參考下
2015-06-06
AngularJs Understanding the Model Component
本文主要介紹AngularJs Understanding the Model Component的內(nèi)容，這里整理了相關(guān)資料，并詳細(xì)講解了這部分知識(shí)，有興趣的小伙伴可以參考下
2016-09-09
Angularjs 1.3 中的$parse實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了angularjs $parse的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-09-09
詳解Angular中延遲加載的原理與使用
Angular 是一個(gè)流行的框架，用于構(gòu)建動(dòng)態(tài)和響應(yīng)式 Web 應(yīng)用程序，在本文中，我們將討論延遲加載以及它如何與 Angular 中的路由一起工作，感興趣的可以跟隨小編一起學(xué)習(xí)一下
2023-06-06
AngularJS ng-bind-template 指令詳解
本文注意介紹AngularJS ng-bind-template 指令,這里把相關(guān)資料整理了一下，并附實(shí)例代碼，有需要的小伙伴可以參考下
2016-07-07
Angular的自定義指令以及實(shí)例
本文主要介紹了Angular的自定義指令，并提供了實(shí)例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2016-12-12
Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能,涉及AngularJS過濾器、排序及字符串遍歷、查詢等相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
Angular2仿照微信UI實(shí)現(xiàn)9張圖片上傳和預(yù)覽的示例代碼
本篇文章主要介紹了Angular2仿照微信UI實(shí)現(xiàn)9張圖片上傳和預(yù)覽的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
AngularJS ng-mousedown 指令
本文主要介紹AngularJS ng-mousedown 指令,這里幫大家整理了ng-mousedown 指令的基本資料,并附代碼示例,有需要的朋友可以參考下
2016-08-08
Angular中的結(jié)構(gòu)指令模式及使用詳解
這篇文章主要為大家介紹了Angular中的結(jié)構(gòu)指令模式及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08