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>change user.data to whaaaat?</button>',
   link: function(scope, element, attrs){
    element.on('click', function(){
     scope.user.data = 'whaaaat?';
     scope.$apply();
    })
   }
  }

■ 给scope变量赋值一个对象

 .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
• ● 点击firstctrl中的按钮，仅仅影响firstctrl中的变量user
• ● 改变secondctrl中的input的值，仅仅影响secondctrl中的变量user，不影响firstctrl中的变量user
• ● 点击secondctrl中的按钮，仅仅影响secondctrl中的变量user

■ 在provider返回一个对象，赋值给scope变量

 .controller('thirdctrl',['user', function(user){
  var third = this;
  third.user = user;
 }])
 .controller('fourthctrl', ['user',function(user){
  var fourth = this;
  fourth.user = user;
 }])
 //provider返回对象
 .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的值，同时影响thirdctrl和fourthctrl中的变量user
• ● 点击thirdctrl中的按钮，同时影响thirdctrl和fourthctrl中的变量user
• ● 改变fourthctrl中input的值，同时影响thirdctrl和fourthctrl中的变量user
• ● 点击fourthctrl中的按钮，同时影响thirdctrl和fourthctrl中的变量user

■ 在provider中返回一个构造函数，赋值给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返回构造函数，每一次构造，就生成一个实例
 .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
  
• ● 点击fifthctrl中的按钮，仅仅影响fifthctrl中的变量user
  
• ● 改变sixthctrl中的input的值，仅仅影响sixthctrl中的变量user，不影响fifthctrl中的变量user
  
• ● 点击sixthctrl中的按钮，仅仅影响sixthctrl中的变量user

■ 在provider中返回一个构造函数，带缓存字段，赋值给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返回构造函数，根据id获取，如果第一次就创建一个放缓存字段中，以后从缓存中获取
 .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的值，同时影响seventhctrl和eighthctrl中的变量user
• ● 点击seventhctrl中的按钮，同时影响seventhctrl和eighthctrl中的变量user
• ● 改变eighthctrl中input的值，同时影响seventhctrl和eighthctrl中的变量user
• ● 点击eighthctrl中的按钮，同时影响seventhctrl和eighthctrl中的变量user

以上就是本文的全部内容，希望对大家的学习有所帮助。