快捷導(dǎo)航

基于Angular中ng-controller父子級嵌套的相關(guān)屬性詳解

更新時間：2018年10月08日 15:18:30 作者：songhh96

今天小編就為大家分享一篇基于Angular中ng-controller父子級嵌套的相關(guān)屬性詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

ng-controller是為應(yīng)用變量添加控制器

當(dāng)有兩個控制器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作用域進(jìn)行訪問操作，但當(dāng)子級控制器嘗試處理父級作用域內(nèi)、子級作用域外的數(shù)據(jù)則可能會導(dǎo)致父級中的數(shù)據(jù)變臟。

以上這篇基于Angular中ng-controller父子級嵌套的相關(guān)屬性詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

利用Ionic2 + angular4實現(xiàn)一個地區(qū)選擇組件
ionic是一個移動端開發(fā)框架，使用hybird技術(shù)，只要使用前端開發(fā)技術(shù)就可以開發(fā)出電腦端，安卓端和ios端的站點程序。下面這篇文章主要給大家介紹了關(guān)于利用Ionic2 + angular4實現(xiàn)一個地區(qū)選擇組件的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
Angularjs自定義指令實現(xiàn)三級聯(lián)動選擇地理位置
這篇文章主要介紹了Angularjs自定義指令實現(xiàn)三級聯(lián)動，選擇地理位置，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
如何處理Angular?錯誤消息ERROR?Error?NullInjectorError?No?provid
這篇文章主要介紹了如何處理Angular?錯誤消息ERROR?Error?NullInjectorError?No?provider?for?XX
2023-07-07
詳解Angularjs中的依賴注入
這篇文章主要為大家詳細(xì)介紹了Angularjs中的依賴注入，AngularJS提供了一個至高無上的依賴注入機(jī)制，感興趣的小伙伴們可以參考一下
2016-03-03
解決angularjs service中依賴注入$scope報錯的問題
今天小編就為大家分享一篇解決angularjs service中依賴注入$scope報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
monaco?editor在Angular的使用詳解
這篇文章主要為大家介紹了monaco?editor在Angular的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Angular 4.X開發(fā)實踐中的踩坑小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 4.X開發(fā)實踐中的一些踩坑經(jīng)驗，文中主要介紹的是使用ngIf或者ngSwitch出錯以及多級依賴注入器的相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
Angular下H5上傳圖片的方法（可多張上傳）
本文給大家分享在使用angular上傳圖片的功能，在開發(fā)過程中遇到很多問題，最終都解決了，今天小編給大家介紹下Angular下H5上傳圖片的方法（可多張上傳),非常不錯，需要的朋友參考下
2017-01-01
Angular2 父子組件數(shù)據(jù)通信實例
這篇文章主要介紹了Angular2 父子組件數(shù)據(jù)通信實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
AngularJS+Node.js實現(xiàn)在線聊天室
隨著互聯(lián)網(wǎng)和信息技術(shù)的發(fā)展，如何快速構(gòu)建高效、強(qiáng)大的動態(tài)網(wǎng)站成為很多人研究的熱點。該文將結(jié)合AngularJS和Node.js構(gòu)建一個在線聊天室，體現(xiàn)AngularJs和Node.js整合的優(yōu)點。
2015-08-08