AngularJS實(shí)現(xiàn)Model緩存的方式
在AngularJS中如何實(shí)現(xiàn)一個(gè)Model的緩存呢?
可以通過在Provider中返回一個(gè)構(gòu)造函數(shù),并在構(gòu)造函數(shù)中設(shè)計(jì)一個(gè)緩存字段,在本篇末尾將引出這種做法。
一般來說,Model要賦值給Scope的某個(gè)變量。
有的直接把對(duì)象賦值給Scope變量;有的在Provider中返回一個(gè)對(duì)象再賦值給Scope變量;有的在Provider中返回一個(gè)構(gòu)造函數(shù)再賦值給Scope變量。本篇來一一體驗(yàn)。
首先自定義一個(gè)directive,用來點(diǎn)擊按鈕改變一個(gè)scope變量值。
angular
.module('app',[])
.directive('updater', function(){
reutrn {
scope: {
user: '='
},
template: '<button>Change User.data to whaaaat?</button>',
link: function(scope, element, attrs){
element.on('click', function(){
scope.user.data = 'whaaaat?';
scope.$apply();
})
}
}
■ 給Scope變量賦值一個(gè)對(duì)象
.controller('FirstCtrl', function(){
var first = this;
first.user = {data: 'cool'};
})
.controller('SecondCtrl', function(){
var second = this;
second.user = {data: 'cool'};
})
頁面中:
<div ng-controller="FirstCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user"></div>
</div>
<div ng-controller="SecondCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user"></div>
</div>
以上,
- ● 改變FirstCtrl中input的值,僅僅影響FirstCtrl中的變量user,不影響SecondCtrl中的變量user
- ● 點(diǎn)擊FirstCtrl中的按鈕,僅僅影響FirstCtrl中的變量user
- ● 改變SecondCtrl中的input的值,僅僅影響SecondCtrl中的變量user,不影響FirstCtrl中的變量user
- ● 點(diǎn)擊SecondCtrl中的按鈕,僅僅影響SecondCtrl中的變量user
■ 在Provider返回一個(gè)對(duì)象,賦值給Scope變量
.controller('ThirdCtrl',['User', function(User){
var third = this;
third.user = User;
}])
.controller('FourthCtrl', ['User',function(User){
var fourth = this;
fourth.user = User;
}])
//provider返回對(duì)象
.provider('User', function(){
this.$get = function(){
return {
data: 'cool'
}
};
})
頁面中:
<div ng-controller="ThirdCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user"></div>
</div>
<div ng-controller="FourthCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user"></div>
</div>
以上,
- ● 改變ThirdCtrl中input的值,同時(shí)影響ThirdCtrl和FourthCtrl中的變量user
- ● 點(diǎn)擊ThirdCtrl中的按鈕,同時(shí)影響ThirdCtrl和FourthCtrl中的變量user
- ● 改變FourthCtrl中input的值,同時(shí)影響ThirdCtrl和FourthCtrl中的變量user
- ● 點(diǎn)擊FourthCtrl中的按鈕,同時(shí)影響ThirdCtrl和FourthCtrl中的變量user
■ 在Provider中返回一個(gè)構(gòu)造函數(shù),賦值給Scope變量
.controller('FifthCtrl',['UserModel', function(UserModel){
var fifth = this;
fifth.user = new UserModel();
}])
.controller('SixthCtrl',['UserModel', function(UserModel){
var sixth = this;
sixth.user = new UserModel();
}])
//provider返回構(gòu)造函數(shù),每一次構(gòu)造,就生成一個(gè)實(shí)例
.provider('UserModel', function(){
this.$get = function(){
return function(){
this.data = 'cool';
}
}
})
頁面中:
<div ng-controller="FifthCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user"></div>
</div>
<div ng-controller="SixthCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user"></div>
</div>
以上,
- ● 改變FifthCtrl中input的值,僅僅影響FifthCtrl中的變量user,不影響SixthCtrl中的變量user
- ● 點(diǎn)擊FifthCtrl中的按鈕,僅僅影響FifthCtrl中的變量user
- ● 改變SixthCtrl中的input的值,僅僅影響SixthCtrl中的變量user,不影響FifthCtrl中的變量user
- ● 點(diǎn)擊SixthCtrl中的按鈕,僅僅影響SixthCtrl中的變量user
■ 在Provider中返回一個(gè)構(gòu)造函數(shù),帶緩存字段,賦值給Scope變量
.controller('SeventhCtrl',['SmartUserModel', function(SmartUserModel){
var seventh = this;
seventh.user = new SmartUserModel(1);
}])
.controller('EighthCtrl',['SmartUserModel', function(SmartUserModel){
var eighth = this;
eighth.user = new SmartUserModel(1);
}])
//provider返回構(gòu)造函數(shù),根據(jù)id獲取,如果第一次就創(chuàng)建一個(gè)放緩存字段中,以后從緩存中獲取
.provider('SmartUserModel', function(){
this.$get = ['$timeout', function($timeout){
var User = function User(id){
//先從緩存字段提取
if(User.cached[id]){
return User.cached[id];
}
this.data = 'cool';
User.cached[id] = this;
};
User.cached = {};
return User;
}];
})
頁面中:
<div ng-controller="SeventhCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user"></div>
</div>
<div ng-controller="EighthCtrl">
{{user.data}}
<input ng-model="user.data">
<div updater user="user"></div>
</div>
以上,
- ● 改變SeventhCtrl中input的值,同時(shí)影響SeventhCtrl和EighthCtrl中的變量user
- ● 點(diǎn)擊SeventhCtrl中的按鈕,同時(shí)影響SeventhCtrl和EighthCtrl中的變量user
- ● 改變EighthCtrl中input的值,同時(shí)影響SeventhCtrl和EighthCtrl中的變量user
- ● 點(diǎn)擊EighthCtrl中的按鈕,同時(shí)影響SeventhCtrl和EighthCtrl中的變量user
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
angularjs ui-router中路由的二級(jí)嵌套
本篇文章主要介紹了angularjs ui-router中路由的二級(jí)嵌套,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03
通過AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示示例
本篇文章主要介紹了通過AngularJS實(shí)現(xiàn)圖片上傳及縮略圖展示,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
AngularJS 將再發(fā)布一個(gè)重要版本 然后進(jìn)入長期支持階段
目前團(tuán)隊(duì)正在開發(fā) AngularJS 1.7.0,而 1.7 的開發(fā)周期將一直持續(xù)到 2018 年 6 月 30 日2018-01-01
詳解Angular調(diào)試技巧之報(bào)錯(cuò)404(not found)
本篇文章主要介紹了詳解Angular調(diào)試技巧之報(bào)錯(cuò)404(not found),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
AngularJS常見過濾器用法實(shí)例總結(jié)
這篇文章主要介紹了AngularJS常見過濾器用法,結(jié)合實(shí)例形式總結(jié)分析了AngularJS大小寫過濾器、貨幣過濾器、日期過濾器、limitTo過濾器、orderBy過濾器及自定義過濾器使用方法,需要的朋友可以參考下2017-07-07
Angularjs中的頁面訪問權(quán)限怎么設(shè)置
最近一直在忙一個(gè)手機(jī)端的項(xiàng)目,所以對(duì)js學(xué)習(xí)有點(diǎn)松撤了。今天小編抽時(shí)間跟大家分享一篇關(guān)于angularjs中的頁面訪問權(quán)限設(shè)置教處,對(duì)angularjs訪問權(quán)限感興趣的朋友一起學(xué)習(xí)吧2016-11-11
詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11

