在Angular中蚀狰,有幾種不同的方式來聲明和使用控制器。
在最開始的時候我們對于angular在view上的綁定都必須使用直接的scope對象,對于controller來說我們也得必須注入$scope這個service敦姻。
angular從1.2版本開始帶來了新語法Controller as。
它使我們不需要把$scope作為依賴項歧杏。簡潔了controller镰惦,同時我們可以使用this在控制器上直接添加我們想要的任何屬性。
$scope和this是什么?
引入controller as之前的寫法
引入controller a's之后的寫法
類比一下js中的構造函數(shù)和實例:
用new方法給myClass()一個實例對象犬绒,我們可以在這個實例中訪問myClass()中的屬性和方法旺入;
app.controller('MainCtrl',function(){})就是在定義一個名稱為MainCtrl的構造函數(shù),MainCtrl as main就是在實例化凯力,生成MainCtrl的實例main茵瘾,然后就可以在main中訪問MainCtrl里定義的變量和函數(shù)
這樣類比的話,scope對象類似于構造函數(shù)的原型對象咐鹤,this則是指當前實例對象
controller as有哪些優(yōu)點
1拗秘、controller as讓繼承關系的變量之間更清晰可讀
使用controller as后,在視圖嵌套中雙向綁定的數(shù)據(jù)所屬清晰可見祈惶,不會出現(xiàn)分不清哪個是哪個的問題雕旨;
2扮匠、controller as 方式解決了父子$scope帶來的混亂
直接使用$scope會產生父變字變,子變父不變的現(xiàn)象凡涩。當一個對象的原型鏈上有屬性foo棒搜,你再給這個對象賦上一個屬性foo,它不會改變原型鏈上的屬性foo活箕。只是新建的一個foo力麸,在原型鏈的更近端,訪問這個屬性時不會在去尋找更遠處的foo屬性讹蘑。
使用controller as方式可以避免上面的混亂末盔,讓關系更清晰:
controller as有哪些應用方式筑舅?
1座慰、在view視圖中定義
2、在路由配置中定義
對象__proto__屬性的值就是它所對應的原型對象翠拣;
controller as的實質是什么版仔?
controller as的實質是一種語法糖,我們可以看一下angular源碼:
從上面的代碼我們能看見的是:angular只是把controller這個對象實例以其as的別名在scope上創(chuàng)建了一個新的對象屬性误墓。
等價于
參考文獻:
AngularJS Controller As Syntax:
angular controller as syntax vs scope:
MENU AngularJS: "Controller as" or "$scope"? :
angularjs 中 controller as 引入的意義:
vm是什么蛮粮?
vm是“view model”,controller函數(shù)實例的統(tǒng)稱谜慌。
為什么在controller中不直接用this然想,而要用vm等代指this?
為了避免this指向的混亂
controller as有缺點嗎欣范?
使用controller as并不能提升整體性能变泄,只是對我們簡潔代碼的一種規(guī)定,因為沒有了$scope恼琼,而controller實例將會成為scope上的一個屬性妨蛹,所以在controller中不能使用$watch,$emit,$on之類的特殊方法,因為這些東西往往不該出現(xiàn)在controller中的晴竞。