快捷導(dǎo)航

AngularJS實(shí)現(xiàn)Model緩存的方式

更新時(shí)間：2016年02月03日 08:59:06 作者：Darren Ji

這篇文章主要介紹了AngularJS實(shí)現(xiàn)Model緩存的方式，分享了多種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>

以上，