AngularJs Understanding the Model Component
在angular文檔討論的上下文中，術(shù)語“model”可以適用于單一對象代表一個(gè)實(shí)體（例如，一個(gè)叫” phones”的model，它的值是一個(gè)電話數(shù)組。）或者作為應(yīng)用的全部數(shù)據(jù)Model（所有實(shí)體）。
在angular中，model可以是任意數(shù)據(jù)，可以通過angular的scope對象的屬性來獲取model。屬性的名稱是model的標(biāo)識，值可以是任意javascript對象（包括數(shù)組和原始數(shù)據(jù)）。
javascript想成為model的唯一的條件是對象必須作為一個(gè)scope對象的屬性被angular scope引用。屬性的引用關(guān)系可以明確或者隱含地創(chuàng)建。
我們可以通過以下幾種方式來顯式創(chuàng)建scope的屬性，關(guān)聯(lián)javascript對象來創(chuàng)建model：
在javascript代碼中，直接賦值給scope對象的屬性；這通常發(fā)出現(xiàn)在controller中：
function MyCtrl($scope) {
// create property 'foo' on the MyCtrl's scope
// and assign it an initial value 'bar'
$scope.foo = 'bar';
}
在模版的angular表達(dá)式（http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html）中，使用賦值操作符：
<button ng-click="{{foos='ball'}}">Click me</button>
在模版中使用ngInit directive（http://docs.angularjs.org/api/ng.directive:ngInit）（僅僅作為例子，不推薦在真實(shí)應(yīng)用中使用）
<body ng-init=" foo = 'bar' ">
angular在下面的模版結(jié)構(gòu)中會(huì)隱式創(chuàng)建model：
表單的input 、select、textarea和其他form元素：
<input ng-model="query" value="fluffy cloud">
上面的代碼，在當(dāng)前的scope中創(chuàng)建了一個(gè)叫”query”的model，并且與input的value值綁定，初始化為”fluffy cloud”。
在ngRepeater中聲明迭代器
<p ng-repeat="phone in phones"></p>
上面的代碼為每一個(gè)phones數(shù)組的元素各自創(chuàng)建了一個(gè)child scope，并且在對應(yīng)的child scope中創(chuàng)建”phone”model，賦予數(shù)組中對應(yīng)的值。
在angular中，當(dāng)出現(xiàn)下面的情況時(shí)，javascript對象將不再是一個(gè)model：
當(dāng)沒有angular scope包含與該對象關(guān)聯(lián)的屬性時(shí)。
所有包含與對象關(guān)聯(lián)的屬性的angular scope成為了陳舊和適合垃圾回收時(shí)。
下面的插圖展示了在一個(gè)簡單的模版中隱式創(chuàng)建一個(gè)簡單的數(shù)據(jù)model。
以上就是關(guān)于AngularJS Understanding the Model Component 的資料整理，后續(xù)繼續(xù)補(bǔ)充，謝謝大家對本站的支持！
相關(guān)文章
AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能,結(jié)合完整實(shí)例形式分析了AngularJS隨機(jī)數(shù)生成與數(shù)值判定相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
詳解AngularJs路由之Ui-router-resolve（預(yù)加載）
本篇文章主要介紹了詳解AngularJs路由之Ui-router-resolve（預(yù)加載），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
詳談Angular 2+ 的表單（一）之模板驅(qū)動(dòng)型表單
這篇文章主要介紹了Angular 2+ 的表單（一）之模板驅(qū)動(dòng)型表單,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-04-04
angularjs ocLazyLoad分步加載js文件實(shí)例
本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了詳解AngularJS中自定義指令的使用,包括結(jié)合自定義HTML標(biāo)簽的使用,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了淺析AngularJs HTTP響應(yīng)攔截器的相關(guān)資料,需要的朋友可以參考下2015-12-12
本文給大家詳細(xì)分析了Angular2整合其他插件的方法，有興趣的朋友學(xué)習(xí)下。2018-01-01
本篇文章主要介紹了AngularJS監(jiān)聽路由變化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Angular JS 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。接下來通過本文給大家介紹AngularJS實(shí)用開發(fā)技巧的相關(guān)資料,需要的朋友可以參考下2016-07-07
深入理解Angularjs中的$resource服務(wù)
大家可以知道在Angularjs中可以用$http同服務(wù)器進(jìn)行通信，功能上比較簡單，AngularJS還提供了另外一個(gè)可選的服務(wù)$resource,使用它可以非常方便的同支持restful的服務(wù)單進(jìn)行數(shù)據(jù)交互。這篇文章主要給大家深入的介紹了Angularjs中的$resource服務(wù)。2016-12-12