AngularJS がモデル caching_AngularJS を実装する方法-jsチュートリアル-php.cn

AngularJS がモデル caching_AngularJS を実装する方法

WBOY

リリース： 2016-05-16 15:16:22

オリジナル

1341 人が閲覧しました

AngularJS でモデルキャッシュを実装するにはどうすればよいですか?

プロバイダーでコンストラクターを返し、コンストラクターでキャッシュフィールドを設計できます。この方法は、この記事の最後で紹介します。

一般的に言えば、モデルはスコープ内の変数に割り当てられる必要があります。

オブジェクトを Scope 変数に直接割り当てるもの、プロバイダーでオブジェクトを返してからそれを Scope 変数に割り当てるもの、プロバイダーでコンストラクターを返してそれを 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();
    })
   }
  }

ログイン後にコピー

■ スコープ変数にオブジェクトを代入する

 .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 にのみ影響します

■ プロバイダー内のオブジェクトを返し、スコープ変数
に代入します。

 .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 に同時に影響します

■ プロバイダーでコンストラクターを返し、スコープ変数
に代入します。

 .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 にのみ影響します

■ キャッシュフィールドを持つプロバイダーのコンストラクターを返し、それをスコープ変数
に割り当てます。

 .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>

ログイン後にコピー

上、