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

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

前面一篇文章《AngularJS指令與控制器之間的互動功能樣本》我們瞭解了指令與控制器之間的互動，接下來看看指令與指令之間是如何進行互動的。

1.首先來瞭解一下什麼是獨立scope

為了更好的理解獨立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中調用了兩次，我們發現，調用兩次的結果為：使用同一個指令構建的scope共用了一個資料，結果如下，我們在一個輸入框中輸入資料，會改變第二個指令中的輸入框

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

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

結果如下：

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指的是指令的獨立scope中定義的一些方法。

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

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

這樣通過：

require:'^father'

子指令就可以繼承並且使用父指令中，獨立scope中的一些方法。此時我們的link函數就可以有第四個參數。

link和controller中方法的區別：

link中的方法是需要執行或者馬上要執行的方法。

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

總結：

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

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

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