基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解
ng-controller是為應(yīng)用變量添加控制器
當(dāng)有兩個(gè)控制器father、child且child 在 father內(nèi)，那child 可以稱(chēng)為子控制器，它將繼承父控制器father的scope。child就可以訪(fǎng)問(wèn)到father的scope中的所有函數(shù)和變量。
例：
<div ng-controller="father">
<div >name1:{{ name1 }}</div>
<div ng-controller="child">name2:{{ name2 }}</div>
</div>
情況1：
app.controller("father",function ($scope) {
$scope.name1 = "x";
$scope.name2 = "y";
});
頁(yè)面顯示結(jié)果：
name1:x name2:y
情況2：
app.controller("child",function ($scope) {
$scope.name1 = "a";
$scope.name2 = "b";
});
頁(yè)面顯示結(jié)果：
name1: name2:b：
情況3：
app.controller("father",function ($scope) {
if($scope.name1){
$scope.name1 += "!";
console.log($scope.name1);
} else {
$scope.name1 = "@";
console.log($scope.name1);
}
if($scope.name2){
$scope.name2 += "#";
console.log($scope.name2);
} else {
$scope.name2 = "$";
console.log($scope.name2);
}
console.log("father");
});
app.controller("child",function ($scope) {
if($scope.name1){
$scope.name1 += "%";
console.log($scope.name1);
} else {
$scope.name1 = "^";
console.log($scope.name1);
}
if($scope.name2){
$scope.name2 += "&";
console.log($scope.name2);
} else {
$scope.name2 = "*";
console.log($scope.name2);
}
console.log("child");
});
控制臺(tái)打印結(jié)果：
@ $ father @% $& child
頁(yè)面顯示結(jié)果：
name1:@ name2:$&
可以看出name1的頁(yè)面顯示結(jié)果與控制臺(tái)打印結(jié)果不一致
結(jié)論：
父級(jí)控制器先執(zhí)行而子級(jí)控制器后執(zhí)行。父級(jí)和子級(jí)控制器都可對(duì)父級(jí)下scope作用域進(jìn)行訪(fǎng)問(wèn)操作，但當(dāng)子級(jí)控制器嘗試處理父級(jí)作用域內(nèi)、子級(jí)作用域外的數(shù)據(jù)則可能會(huì)導(dǎo)致父級(jí)中的數(shù)據(jù)變臟。
以上這篇基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
利用Ionic2 + angular4實(shí)現(xiàn)一個(gè)地區(qū)選擇組件
ionic是一個(gè)移動(dòng)端開(kāi)發(fā)框架，使用hybird技術(shù)，只要使用前端開(kāi)發(fā)技術(shù)就可以開(kāi)發(fā)出電腦端，安卓端和ios端的站點(diǎn)程序。下面這篇文章主要給大家介紹了關(guān)于利用Ionic2 + angular4實(shí)現(xiàn)一個(gè)地區(qū)選擇組件的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-07-07
Angularjs自定義指令實(shí)現(xiàn)三級(jí)聯(lián)動(dòng) 選擇地理位置
這篇文章主要介紹了Angularjs自定義指令實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)，選擇地理位置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
如何處理Angular?錯(cuò)誤消息ERROR?Error?NullInjectorError?No?provid
這篇文章主要介紹了如何處理Angular?錯(cuò)誤消息ERROR?Error?NullInjectorError?No?provider?for?XX2023-07-07
這篇文章主要為大家詳細(xì)介紹了Angularjs中的依賴(lài)注入，AngularJS提供了一個(gè)至高無(wú)上的依賴(lài)注入機(jī)制，感興趣的小伙伴們可以參考一下2016-03-03
解決angularjs service中依賴(lài)注入$scope報(bào)錯(cuò)的問(wèn)題
今天小編就為大家分享一篇解決angularjs service中依賴(lài)注入$scope報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要為大家介紹了monaco?editor在Angular的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Angular 4.X開(kāi)發(fā)實(shí)踐中的踩坑小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 4.X開(kāi)發(fā)實(shí)踐中的一些踩坑經(jīng)驗(yàn)，文中主要介紹的是使用ngIf或者ngSwitch出錯(cuò)以及多級(jí)依賴(lài)注入器的相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-07-07
本文給大家分享在使用angular上傳圖片的功能，在開(kāi)發(fā)過(guò)程中遇到很多問(wèn)題，最終都解決了，今天小編給大家介紹下Angular下H5上傳圖片的方法（可多張上傳),非常不錯(cuò)，需要的朋友參考下2017-01-01
Angular2 父子組件數(shù)據(jù)通信實(shí)例
這篇文章主要介紹了Angular2 父子組件數(shù)據(jù)通信實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
AngularJS+Node.js實(shí)現(xiàn)在線(xiàn)聊天室
隨著互聯(lián)網(wǎng)和信息技術(shù)的發(fā)展，如何快速構(gòu)建高效、強(qiáng)大的動(dòng)態(tài)網(wǎng)站成為很多人研究的熱點(diǎn)。該文將結(jié)合AngularJS和Node.js構(gòu)建一個(gè)在線(xiàn)聊天室，體現(xiàn)AngularJs和Node.js整合的優(yōu)點(diǎn)。2015-08-08