摘要:基于原型的繼承性視圖存在嵌套的時候,內層的是可以繼承到外層的數據的。這者的區別就是在中繼承了中的作用域。通過監聽某個的是否發生變化來觸發相應的。第三個屬性值,當為規定的是比較對象的值,而不是引用。這樣可以非常好的將一些可服用的代碼抽離出來。
scope基于原型的繼承性
視圖存在嵌套的時候,內層的controller是可以繼承到外層的controller數據的。
scope在angularjs里的繼承性(基于原型的繼承性):
</>復制代碼
html:
Parent {{info}}
child {{info}}
當頁面一開始加載完畢之后,通過在parent的input里面輸入內容的時候,在child的input里面也會發生響應。這個時候,subController里的info的值,是繼承parent里面的mainController的值。
此時,如果在child的input里面輸入內容,會發現child里面的info發生了變化,但是parent里面并未發生變化。
此時如果在parent的Input里面輸入值的話,僅僅是Parent的info發生了變化,而child的info是不會發生變化的。
然后我再換一種寫法
</>復制代碼
html:
parent {{msg.info}}
child {{msg.info}}
js:
app.controller("mainController", function(){
$scope.msg = {
info: "message"
};
});
app.controller("subController", function(){
});
ng-model此時變成了某個對象的屬性。那么現在不管你更改的是parent中的input還是child中的input,都會引起視圖相應的變化。
這2者的區別就是在subController中繼承了mainController中的作用域。當ng-model是primitive值時,剛初始化的時候,在subController里面因為,會新建一個相同的變量,這個時候,如果再在subController里面獲取這個primitive的時候,就直接在subController里面就能得到。
而如果mainController里面的ng-model是個對象的屬性的時候,subController里面ng-model是對這個對象的引用。那么不管更改mainController還是subController里面的ng-model視圖里面都會發生變化。
在Angularjs里面$scope有個$watch方法,當需要時更新DOM。通過監聽某個model的是否發生變化來觸發相應的callback。
依然是上面的例子:
</>復制代碼
html:
parent
js:
app.controller("mainController", function(){
$scope.msg = {
info: "message"
};
$scope.$watch("msg", function(val){
console.log(val);
})
});
除了頁面初始化后,控制臺會輸出{info: "message"}外,不過input里面的值如何變化。控制臺都不會輸出任何內容了。這是因為$watch是比較的msg這個對象的引用是否發生了變化,很顯然這個地方msg的引用(heap里面存放的地址)并沒用發生變化,僅僅是msg.info的值發生了變化。
但是我改變另外一種寫法:
</>復制代碼
$scope.$watch("msg", function(val){
console.log(val);
}, true);
這個是否就能監聽到msg.info發生變化后,msg的內容了。第三個屬性boolean值,當為true,規定的是比較對象的值,而不是引用。
ng-repeat會給每個循環新建一個作用域。
ng-include和ng-view都是動態加載視圖,這個時候也會新建作用域
當然還有ng-switch,directive也會有這種scope繼承的情況出現。
具體深入理解angularjs的scope,請移步Understanding scopes
Angularjs 1.2 “Controller as” polyfill</>復制代碼
html:
{{parent.name}}
{{child.name}}
js:
app.controller("parentController", ApiParentFn);
function ApiCtrlFn(){
this.name = "XL";
}
app.controller("childController", ApiChildFn);
function ApiChildFn(){
this.name = "xl";
}
最后視圖內容大家可以動手試試。
最近也試著多用這個語法去寫控制器,首先寫法上更偏向OO的風格。在這個ApiParetnFn上定義不同的model。
</>復制代碼
app.controller("mainCtrl", ["$http", ApiCtrlFn]);
function ApiCtrlFn(http){
this.http = http;
this.name = "XL";
}
ApiCtrlFn.prototype = {
reqPostFn: function(url){
this.http.get(url).success(function(data){
xxxx
})
.error(function(data){
xxxx
})
},
changeNameFn: function(name){
this.name = name;
}
}
html:
{{this.name}}
在ApiParentFn.prototype上定義不同的方法。這樣可以非常好的將一些可服用的代碼抽離出來。不同的控制器只需要對構造函數進行實例化,然后調用不同的原型上定義的方法就OK了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/78210.html
摘要:因為在里面是基于原型進行繼承的。事實上注入后,即提供了一個,可以在這個上面綁定屬性和方法。當使用語法的時候,事實上是綁定到了的對象上面。注意這個地方執行順序是從子元素開始再到父元素的。即在執行階段前確保執行完畢。 Controller As angular .module(app, []) .controller(DemoController, ...
摘要:本文針對的讀者具備性能優化的相關知識雅虎條性能優化原則高性能網站建設指南等擁有實戰經驗。這種機制能減少瀏覽器次數,從而提高性能。僅會檢查該和它的子,當你確定當前操作僅影響它們時,用可以稍微提升性能。 搬運自: http://atian25.github.io/2014/05/09/angular-performace/ 不知不覺,在項目中用angular已經半年多了,踩了很多坑...
摘要:使用開發,很重要的一步是需要開發自定義的指令。接下來分幾個步驟記錄如何開發一個自定義的指令。對這個元素及其子元素進行變形之類的操作是安全的。鏈接函數鏈接函數負責注冊事件和更新。說明和是指令的關鍵部分,留在下一章中詳細討論。 使用Angularjs開發,很重要的一步是需要開發自定義的指令(custom directives)。接下來分幾個步驟記錄如何開發一個自定義的指令。 目錄: 指令...
摘要:最近在公司使用用完成了一個項目,在此記錄一下過程中遇到的問題及解決方案。其他兩種方法可參考站內文章控制器如何通信結語以上為我在編寫一個應用時遇到的問題及解決方案,記錄并分享出來,歡迎大家指正 最近在公司使用用AngularJS(1.3.9)完成了一個項目,在此記錄一下過程中遇到的問題及解決方案。 使用$http服務發送ajax請求時后端無法判斷請求是XMLHttpRequest 問題...
閱讀 2469·2021-11-19 09:40
閱讀 3604·2021-11-17 17:08
閱讀 3808·2021-09-10 10:50
閱讀 2231·2019-08-27 10:56
閱讀 1954·2019-08-27 10:55
閱讀 2650·2019-08-26 12:14
閱讀 1002·2019-08-26 11:58
閱讀 1503·2019-08-26 10:43
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要