基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解
更新時(shí)間：2018年10月08日 15:18:30 作者：songhh96
今天小編就為大家分享一篇基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
ng-controller是為應(yīng)用變量添加控制器
當(dāng)有兩個(gè)控制器father、child且child 在 father內(nèi)，那child 可以稱為子控制器，它將繼承父控制器father的scope。child就可以訪問到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";
});
頁面顯示結(jié)果：
name1:x name2:y
情況2：
app.controller("child",function ($scope) {
$scope.name1 = "a";
$scope.name2 = "b";
});
頁面顯示結(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
頁面顯示結(jié)果：
name1:@ name2:$&
可以看出name1的頁面顯示結(jié)果與控制臺(tái)打印結(jié)果不一致
結(jié)論：
父級(jí)控制器先執(zhí)行而子級(jí)控制器后執(zhí)行。父級(jí)和子級(jí)控制器都可對(duì)父級(jí)下scope作用域進(jì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)文章
本文給大家推薦的是使用angularjs實(shí)現(xiàn)整合微信新推出的UI（weui）的全部過程，有相同需求的小伙伴可以參考下2016-03-03
Angular實(shí)現(xiàn)svg和png圖片下載實(shí)現(xiàn)
這篇文章主要介紹了Angular實(shí)現(xiàn)svg和png圖片下載實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
AngularJS 在同一個(gè)界面啟動(dòng)多個(gè)ng-app應(yīng)用模塊詳解
這篇文章主要介紹了AngularJS 在同一個(gè)界面啟動(dòng)多個(gè)ng-app應(yīng)用模塊詳解的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了詳解Angular模板引用變量及其作用域，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
本文主要介紹AngularGauge 屬性的知識(shí)，這里這里了詳細(xì)的資料來介紹AngularGauge屬性的內(nèi)容知識(shí)，幫助大家學(xué)習(xí)參考，有需要的小伙伴可以參考下2016-09-09
簡(jiǎn)單來說Angular.js是google開發(fā)者設(shè)計(jì)和開發(fā)的一套前端開發(fā)框架，幫助你簡(jiǎn)化前端開發(fā)的負(fù)擔(dān)。當(dāng)然，這里有很多其它的前端開發(fā)框架，但是如何選擇合適的前端框架對(duì)于我們這些開發(fā)人員來說就不是那么容易了！2014-11-11
這篇文章主要介紹了Angular設(shè)置別名alias及打包命令的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
SCE，即strict contextual escaping,我的理解是 嚴(yán)格的上下文隔離 ...翻譯的可能不準(zhǔn)確，但是通過字面理解，應(yīng)該是angularjs嚴(yán)格的控制上下文訪問，通過本文給大家介紹AngularJS 使用$sce控制代碼安全檢查，對(duì)angularjs sce相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
詳解如何為你的angular app構(gòu)建一個(gè)第三方庫
這篇文章主要介紹了詳解如何為你的angular app構(gòu)建一個(gè)第三方庫，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
AngularJS動(dòng)態(tài)生成select下拉框的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于AngularJS動(dòng)態(tài)生成select下拉框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用AngularJS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11