腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

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

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

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

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

前面一篇文章《AngularJS指令與控制器之間的交互功能示例》我們了解了指令與控制器之間的交互，接下來看看指令與指令之間是如何進(jìn)行交互的。

1.首先來了解一下什么是獨(dú)立scope

為了更好的理解獨(dú)立scope，我們來看一段代碼：

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

var app=angular.module('firstApp',[]);//app模塊名
  app.controller('myController1',['$scope',function($scope){
}]);
app.directive('hello',function(){
    return{
      restrict:'E',
      template:"<div><input type='text' ng-  model='username'/>{{username}}",
      replace:true
    }
})

我們定義了一個指令，并在html中調(diào)用了兩次，我們發(fā)現(xiàn)，調(diào)用兩次的結(jié)果為：使用同一個指令構(gòu)建的scope共享了一個數(shù)據(jù)，結(jié)果如下，我們在一個輸入框中輸入數(shù)據(jù)，會改變第二個指令中的輸入框

如何解決這個問題呢，我們需要給指令生成獨(dú)立的scope，每次使用指令時(shí)，生成的scope都是獨(dú)立的，我們只需要如此修改：

app.directive('hello',function(){
    return{
      restrict:'E',
      scope:{},
      template:"<div><input type='text' ng-model='username'/>{{username}}",
      replace:true
    }
})

結(jié)果如下：

2.指令與指令之間的交互，指令的繼承

（1）首先我們定義了一個父指令，定義的方式如下：

app.directive('father',function(){
    return{
     restrict:'E',
     scope:{},
     controller:function($scope){
      this.mean1=function(){
       console.log('這是第一個方法....');
      };
      this.mean2=function(){
       console.log('這是第二個方法....');
      };
      this.mean3=function(){
       console.log('這是第三個方法....');
      }
     }
    }
});

我們注意到，指令里面也有controller，這里的controller與控制器定義過程中的不同，這里的controller指的是指令的獨(dú)立scope中定義的一些方法。

（2）定義子指令，子指令中可以使用父指令中scope中的方法：

app.directive('childFirst',function(){
    require:'^father',
    link:function(scope,ele,attr,fatherCtrl){
      fatherCtrl.mean1();
    }
})

這樣通過：

require:'^father'

子指令就可以繼承并且使用父指令中，獨(dú)立scope中的一些方法。此時(shí)我們的link函數(shù)就可以有第四個參數(shù)。

link和controller中方法的區(qū)別：

link中的方法是需要執(zhí)行或者馬上要執(zhí)行的方法。

controller中的方法是希望暴露出來，給外部使用的一些方法。

總結(jié)：

指令之間的交互，是通過指令的controller中暴露出來的方法，給外部指令使用。

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

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具