AngularJS实现Model缓存的方式
在AngularJS中如何实现一个Model的缓存呢？
可以通过在Provider中返回一个构造函数，并在构造函数中设计一个缓存字段，在本篇末尾将引出这种做法。
一般来说，Model要赋值给Scope的某个变量。
有的直接把对象赋值给Scope变量；有的在Provider中返回一个对象再赋值给Scope变量；有的在Provider中返回一个构造函数再赋值给Scope变量。本篇来一一体验。
首先自定义一个directive，用来点击按钮改变一个scope变量值。
angular
.module('app',[])
.directive('updater',function(){
reutrn{
scope:{
user:'='
},
template:'<button>ChangeUser.datatowhaaaat?</button>',
link:function(scope,element,attrs){
element.on('click',function(){
scope.user.data='whaaaat?';
scope.$apply();
})
}
}
■给Scope变量赋值一个对象
.controller('FirstCtrl',function(){
varfirst=this;
first.user={data:'cool'};
})
.controller('SecondCtrl',function(){
varsecond=this;
second.user={data:'cool'};
})
页面中：
<divng-controller="FirstCtrl">
{{user.data}}
<inputng-model="user.data">
<divupdateruser="user"></div>
</div>
<divng-controller="SecondCtrl">
{{user.data}}
<inputng-model="user.data">
<divupdateruser="user"></div>
</div>
以上，
- ●改变FirstCtrl中input的值，仅仅影响FirstCtrl中的变量user，不影响SecondCtrl中的变量user
- ●点击FirstCtrl中的按钮，仅仅影响FirstCtrl中的变量user
- ●改变SecondCtrl中的input的值，仅仅影响SecondCtrl中的变量user，不影响FirstCtrl中的变量user
- ●点击SecondCtrl中的按钮，仅仅影响SecondCtrl中的变量user
■在Provider返回一个对象，赋值给Scope变量
.controller('ThirdCtrl',['User',function(User){
varthird=this;
third.user=User;
}])
.controller('FourthCtrl',['User',function(User){
varfourth=this;
fourth.user=User;
}])
//provider返回对象
.provider('User',function(){
this.$get=function(){
return{
data:'cool'
}
};
})
页面中：
<divng-controller="ThirdCtrl">
{{user.data}}
<inputng-model="user.data">
<divupdateruser="user"></div>
</div>
<divng-controller="FourthCtrl">
{{user.data}}
<inputng-model="user.data">
<divupdateruser="user"></div>
</div>
以上，
- ●改变ThirdCtrl中input的值，同时影响ThirdCtrl和FourthCtrl中的变量user
- ●点击ThirdCtrl中的按钮，同时影响ThirdCtrl和FourthCtrl中的变量user
- ●改变FourthCtrl中input的值，同时影响ThirdCtrl和FourthCtrl中的变量user
- ●点击FourthCtrl中的按钮，同时影响ThirdCtrl和FourthCtrl中的变量user
■在Provider中返回一个构造函数，赋值给Scope变量
.controller('FifthCtrl',['UserModel',function(UserModel){
varfifth=this;
fifth.user=newUserModel();
}])
.controller('SixthCtrl',['UserModel',function(UserModel){
varsixth=this;
sixth.user=newUserModel();
}])
//provider返回构造函数，每一次构造，就生成一个实例
.provider('UserModel',function(){
this.$get=function(){
returnfunction(){
this.data='cool';
}
}
})
页面中：
<divng-controller="FifthCtrl">
{{user.data}}
<inputng-model="user.data">
<divupdateruser="user"></div>
</div>
<divng-controller="SixthCtrl">
{{user.data}}
<inputng-model="user.data">
<divupdateruser="user"></div>
</div>
以上，
- ●改变FifthCtrl中input的值，仅仅影响FifthCtrl中的变量user，不影响SixthCtrl中的变量user
- ●点击FifthCtrl中的按钮，仅仅影响FifthCtrl中的变量user
- ●改变SixthCtrl中的input的值，仅仅影响SixthCtrl中的变量user，不影响FifthCtrl中的变量user
- ●点击SixthCtrl中的按钮，仅仅影响SixthCtrl中的变量user
■在Provider中返回一个构造函数，带缓存字段，赋值给Scope变量
.controller('SeventhCtrl',['SmartUserModel',function(SmartUserModel){
varseventh=this;
seventh.user=newSmartUserModel(1);
}])
.controller('EighthCtrl',['SmartUserModel',function(SmartUserModel){
vareighth=this;
eighth.user=newSmartUserModel(1);
}])
//provider返回构造函数，根据id获取，如果第一次就创建一个放缓存字段中，以后从缓存中获取
.provider('SmartUserModel',function(){
this.$get=['$timeout',function($timeout){
varUser=functionUser(id){
//先从缓存字段提取
if(User.cached[id]){
returnUser.cached[id];
}
this.data='cool';
User.cached[id]=this;
};
User.cached={};
returnUser;
}];
})
页面中：
<divng-controller="SeventhCtrl">
{{user.data}}
<inputng-model="user.data">
<divupdateruser="user"></div>
</div>
<divng-controller="EighthCtrl">
{{user.data}}
<inputng-model="user.data">
<divupdateruser="user"></div>
</div>
以上，
- ●改变SeventhCtrl中input的值，同时影响SeventhCtrl和EighthCtrl中的变量user
- ●点击SeventhCtrl中的按钮，同时影响SeventhCtrl和EighthCtrl中的变量user
- ●改变EighthCtrl中input的值，同时影响SeventhCtrl和EighthCtrl中的变量user
- ●点击EighthCtrl中的按钮，同时影响SeventhCtrl和EighthCtrl中的变量user
以上就是本文的全部内容，希望对大家的学习有所帮助。