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

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

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

本文實例講述了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.同一個指令，在動態(tài)調(diào)用多個父類控制器中的方法：

<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中，屬性是通過駝峰法則得到的。

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

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

您可能感興趣的文章:

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