你的位置:首页 > Java教程

[Java教程]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