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