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

更新時間：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.同一個指令，在動態(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中，屬性是通過駝峰法則得到的。

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

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

您可能感興趣的文章:

相關(guān)文章

Angular+Node生成隨機(jī)數(shù)的方法
這篇文章主要介紹了Angular+Node生成隨機(jī)數(shù)的方法,結(jié)合具體實(shí)例分析了Angular與Node結(jié)合控制前后端實(shí)現(xiàn)隨機(jī)數(shù)功能的相關(guān)操作技巧,需要的朋友可以參考下
2017-06-06
Angularjs+bootstrap+table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能
這篇文章主要介紹了Angularjs bootstrap table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能,需要的朋友可以參考下
2017-03-03
使用Angular.js實(shí)現(xiàn)簡單的購物車功能
在各大購物網(wǎng)站大家都可以簡單購物車效果演示，下面通過本文給大家分享一段代碼關(guān)于使用Angular.js實(shí)現(xiàn)簡單的購物車功能，需要的朋友可以參考下
2016-11-11
AngularJS中關(guān)于ng-class指令的幾種實(shí)現(xiàn)方式詳解
這篇文章給大家介紹了angularJS中ng-class指令的三種實(shí)現(xiàn)方式，其中包括通過數(shù)據(jù)的雙向綁定、通過對象數(shù)組和通過key/value這三種方式，有需要的朋友們可以參考學(xué)習(xí)，下面來一起看看吧。
2016-09-09
由淺入深剖析Angular表單驗(yàn)證
這篇文章主要介紹了由淺入深剖析Angular表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下
2016-07-07
如何利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用詳解
這篇文章主要給大家介紹了如何利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用@angular/cli V6.0具有一定的參考學(xué)習(xí)價值，需要的朋友可以參考下
2018-05-05
angular6 填坑之sdk的方法
這篇文章主要介紹了angular6 填坑之sdk的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
詳解Angular之路由基礎(chǔ)
單頁應(yīng)用中，組件時構(gòu)建應(yīng)用的基礎(chǔ)元素，頁面展示什么內(nèi)容均是靠頁面有什么組件決定的，而展示什么組件又是由一組路由（帶有Url元素的特定集合，可用于導(dǎo)航視圖）決定的，希望本文可以幫助讀者了解路由的基礎(chǔ)概念和基礎(chǔ)使用、寫法。
2021-05-05
AngularJS入門教程之AngularJS模型
這篇文章主要介紹了AngularJS入門教程之AngularJS模型的相關(guān)資料,需要的朋友可以參考下
2016-04-04
Angular發(fā)布1.5正式版，專注于向Angular 2的過渡
Angular團(tuán)隊(duì)最近發(fā)布了Angular 1.5的正式版，該版本實(shí)現(xiàn)了一次重大的升級，它讓仍在使用1.X版本的開發(fā)者將能夠更容易地過渡到Angular 2的開發(fā)
2016-02-02