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中調(diào)用了兩次，我們發(fā)現(xiàn)，調(diào)用兩次的結果為：使用同一個指令構建的scope共享了一個數(shù)據(jù)，結果如下，我們在一個輸入框中輸入數(shù)據(jù)，會改變第二個指令中的輸入框
如何解決這個問題呢，我們需要給指令生成獨立的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函數(shù)就可以有第四個參數(shù)。
link和controller中方法的區(qū)別：
link中的方法是需要執(zhí)行或者馬上要執(zhí)行的方法。
controller中的方法是希望暴露出來，給外部使用的一些方法。
總結：
指令之間的交互，是通過指令的controller中暴露出來的方法，給外部指令使用。
更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
- angularJS之$http：與服務器交互示例
- 詳解angularJs中自定義directive的數(shù)據(jù)交互
- AngularJS指令與控制器之間的交互功能示例
- AngularJS中directive指令使用之事件綁定與指令交互用法示例
- AngularJS實現(xiàn)與Java Web服務器交互操作示例【附demo源碼下載】
- AngularJS入門教程之與服務器(Ajax)交互操作示例【附完整demo源碼下載】
- 詳解AngularJs中$resource和restfu服務端數(shù)據(jù)交互
- AngularJS 指令的交互詳解及實例代碼
- angularjs實現(xiàn)與服務器交互分享
- AngularJS中$http的交互問題
相關文章
本篇文章主要介紹了angularjs 頁面自適應高度的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細介紹了Angular頁面間切換及傳值的四種方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Angularjs中UI Router全攻略，涉及到angularjs ui router的基本用法，需要的朋友參考下吧2016-01-01
本篇文章主要介紹了詳解使用angular的HttpClient搭配rxjs ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Angular設置別名alias及打包命令的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
使用typescript開發(fā)angular模塊并發(fā)布npm包
本篇文章主要介紹了使用typescript開發(fā)angular模塊并發(fā)布npm包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了由淺入深剖析Angular表單驗證 的相關資料,需要的朋友可以參考下2016-07-07
今天小編就為大家分享一篇angular2 組件之間通過service互相傳遞的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Angular基于Constructor?Parameter的依賴注入方式詳解
這篇文章主要為大家介紹了Angular基于Constructor?Parameter的依賴注入方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
詳解為Angular.js內(nèi)置$http服務添加攔截器的方法
所謂攔截器就是在目標達到目的地之前對其進行處理以便處理結果更加符合我們的預期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器，每個攔截器都是實現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務添加攔截器的方法。2016-12-12