AngularJS實作Model快取的方式_AngularJS-js教程-PHP中文網

AngularJS實作Model快取的方式_AngularJS

WBOY

發布： 2016-05-16 15:16:22

原創

1283 人瀏覽過

在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&#63;</button>',
   link: function(scope, element, attrs){
    element.on('click', function(){
     scope.user.data = 'whaaaat&#63;';
     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>

登入後複製

以上，