摘要:訪問對象中從父類繼承的對象時都會去訪問原型鏈。因為此處中混合用了,也會產生自己的,因此有和。在和兩種情況下會分別產生,是兩個不同的,號不同。
本文主要是學習別人的文章和回答之后的總結,此處給出鏈接深入學習AngularJS Scope
JavaScript原型繼承簡介
AngularJs中是雙向數據綁定,但并不是每次修改都會產生相應的效果,有些時候傳基礎類型的值就有可能存在這種情況。JavaScript本身應該也會存在這種情況的,先挖個坑,待我好好學學JavaScript之后再來填。
上圖是JavaScript的原型繼承圖,子類會繼承父類的屬性,讀子類從父類繼承的屬性的值時會去訪問原型鏈,也就是一層一層向上直到找到父類中的屬性。但是如果直接給子類中基礎類型的屬性賦值的話不會訪問原型鏈,也就是會在子類中建一個同名的新屬性,再次訪問時父類中的屬性就不會被訪問到了。訪問對象中從父類繼承的對象時都會去訪問原型鏈。
childScope.aString === "parent string" //true 訪問了原型鏈 childScope.aNumber === 100 //true 訪問了原型鏈 childScope.aNumber = 20 //不訪問原型鏈,子類中將增加一個新屬性,值為20 childScope.aString = "child string" //不訪問原型鏈,子類中將增加一個新的屬性,值為 child string childScope.anArray[2] = 100 //訪問了原型鏈,父類中的anArray對象中第三個值被修改
AngularJS中ng-repeat、ng-switch和ng-include測試
{{list1}}
{{list2}}
switch"s parent scope, parent scope"s child scope, different with false caseparent scope, not switch scope
var TestScopeModule = angular.module("TestScopeModule", []); TestScopeModule.controller("TestScopeCtrl",["$scope",function ($scope) { $scope.list1 = ["value1","value2", "value3"]; $scope.list2 = [{text : "value1"},{text : "value2"},{text : "value3"}]; $scope.showScope = function (e) { console.log(angular.element(e.srcElement).scope()); }; $scope.loginData = false; $scope.parent = {}; $scope.parent.loginData = false; $scope.login = function () { $scope.loginData = true; }; $scope.logout = function () { $scope.loginData = false; }; $scope.login1 = function () { $scope.parent.loginData = true; }; $scope.logout1 = function () { $scope.parent.loginData = false; }; }])以上是一小段測試代碼,分別測試了ng-repeat、ng-switch和ng-include,代碼中標出了測試結果,也就是子scope和父scope的范圍。
parent scope中的屬性和值
第一個ng-repeat中第一個child scope,scope中有自己的item屬性和值,此處由于是基本的數據類型,改變值時不會訪問原型鏈,因此和parent scope中的值不一樣。ng-repeat會產生多個child scope,并且每個child scope中都會有自己的item屬性。
第二個ng-repeat中第一個child scope,scope中有自己的item屬性和值,此處item是對象,因此改變item對象中的value時會先去訪問原型鏈,因此和parent scope中的值一樣
ngswitch 產生的child scope,可以看到$parent中是parent scope。因為此處ngswitch中混合用了nginclude,nginclude也會產生自己的scope,因此有childHead和childTail。ngswitch在true和false兩種情況下會分別產生scope,是兩個不同的scope,id號不同。
這是ngswitch中nginclude產生的child scope,可以看到$parent的$id是12,也就是ngswitch產生的scope的id。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/80965.html
相關文章
Angularjs學習筆記指令
摘要:自定義指令中有很多內置指令,一般都是以開頭的比如等等。本文介紹的自定義指令的用法。該參數的意思是替換指令的內容,更改上面的例子。將屬性綁定到父控制器的域中學習概念多指令中的參數中增加了的值和的點擊函數。 自定義指令 angularjs中有很多內置指令,一般都是以ng開頭的;比如:ng-app,ng-click,ng-repeat等等。本文介紹angularjs的自定義指令的用法。 指令...
Angularjs學習筆記指令
摘要:自定義指令中有很多內置指令,一般都是以開頭的比如等等。本文介紹的自定義指令的用法。該參數的意思是替換指令的內容,更改上面的例子。將屬性綁定到父控制器的域中學習概念多指令中的參數中增加了的值和的點擊函數。 自定義指令 angularjs中有很多內置指令,一般都是以ng開頭的;比如:ng-app,ng-click,ng-repeat等等。本文介紹angularjs的自定義指令的用法。 指令...
AngularJS學習筆記(2) --- 指令參數和scope綁定策略
摘要:引言指令可以說是的核心,而其開發也是比較困難的,本文主要介紹指令的一些參數和的綁定策略。指令執行的優先級,用于多個指令同時作用于同一個元素時。改變父會影響指令,而改變指令不會影響父。在父和指令之間建立雙向綁定。 引言 指令(Directive)可以說是 AngularJS 的核心,而其開發也是比較困難的,本文主要介紹指令的一些參數和scope的綁定策略。 參數 從 AngularJS ...
理解和學習AngularJS(一)
摘要:為指令賦值函數名,即可運行。它也是一個對象,指向應用程序作用域內的所有元素和執行上下文。簡而言之,是與指令元素相關聯的當前作用域,可以理解為視圖和控制器間的一個通道。它們被組織為模塊形式,之后可以被另一個引用。 Angularjs Angular是一款主旋律的MVVM框架,框架和傳統的庫不同: 類庫是一些函數的集合,它能幫助你寫WEB應用。起主導作用的是你的代碼,由你來決定何時使用類...
angularjs學習筆記—指令input
摘要:新增的日期選擇器。類型必填必填最小長度最大長度正則匹配正則匹配更新觸發即使沒有使用校驗屬性,只要數據不符合格式,就會被更新成。 input[text] input一般和ngModel結合使用來實現雙向綁定,同時angular提供了很多表單校驗的指令 required 必填 ngRequired 必填(ngRequired可以控制是否是必填校驗) ngMinlength 最小長度...
發表評論
0條評論
閱讀 1773·2021-11-11 16:55
閱讀 2575·2021-08-27 13:11
閱讀 3632·2019-08-30 15:53
閱讀 2307·2019-08-30 15:44
閱讀 1396·2019-08-30 11:20
閱讀 1045·2019-08-30 10:55
閱讀 950·2019-08-29 18:40
閱讀 3042·2019-08-29 16:13