Bagaimana AngularJS melaksanakan Model caching_AngularJS

Bagaimana untuk melaksanakan cache Model dalam AngularJS?

Anda boleh mengembalikan pembina dalam Pembekal dan mereka bentuk medan cache dalam pembina Pendekatan ini akan diperkenalkan pada penghujung artikel ini.

Secara umumnya, Model harus diberikan kepada pembolehubah dalam Skop.

Sesetengah memberikan objek secara langsung kepada pembolehubah Skop; sesetengahnya mengembalikan objek dalam Penyedia dan kemudian menetapkannya kepada pembolehubah Skop; beberapa mengembalikan pembina dalam Penyedia dan kemudian menetapkannya kepada pembolehubah Skop. Mari kita alami mereka satu persatu dalam artikel ini.

Mula-mula suaikan arahan untuk menukar nilai pembolehubah skop dengan mengklik butang.

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();
    })
   }
  }

■ Berikan objek kepada pembolehubah Skop

 .controller('FirstCtrl', function(){
  var first = this;
  first.user = {data: 'cool'};
 })
 .controller('SecondCtrl', function(){
  var second = this;
  second.user = {data: 'cool'};
 })

Dalam halaman:

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

Di atas,

• ● Menukar nilai input dalam FirstCtrl hanya memberi kesan kepada pengguna berubah dalam FirstCtrl dan tidak menjejaskan pengguna berubah dalam SecondCtrl
• ● Mengklik butang dalam FirstCtrl hanya memberi kesan kepada pengguna berubah dalam FirstCtrl
• ● Menukar nilai input dalam SecondCtrl hanya memberi kesan kepada pengguna berubah dalam SecondCtrl dan tidak menjejaskan pengguna berubah dalam FirstCtrl
• ● Mengklik butang dalam SecondCtrl hanya memberi kesan kepada pengguna berubah dalam SecondCtrl

■ Kembalikan objek dalam Pembekal dan tetapkan kepada pembolehubah Skop

 .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'
   }
  };
 })

Dalam halaman:

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

Di atas,

• ● Tukar nilai input dalam ThirdCtrl, dan pada masa yang sama mempengaruhi pengguna pembolehubah dalam ThirdCtrl dan FourthCtrl
• ● Klik butang dalam ThirdCtrl untuk mempengaruhi pengguna pembolehubah dalam ThirdCtrl dan FourthCtrl secara serentak
• ● Tukar nilai input dalam FourthCtrl, dan pada masa yang sama mempengaruhi pengguna pembolehubah dalam ThirdCtrl dan FourthCtrl
• ● Klik butang dalam FourthCtrl untuk memberi kesan pada pengguna pembolehubah dalam ThirdCtrl dan FourthCtrl

■ Kembalikan pembina dalam Pembekal dan berikannya kepada pembolehubah Skop

 .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';
   }
  }
 })

Dalam halaman:

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

Di atas,

• ● Menukar nilai input dalam FifthCtrl hanya memberi kesan kepada pengguna pembolehubah dalam FifthCtrl dan tidak menjejaskan pengguna pembolehubah dalam SixthCtrl
  
• ● Mengklik butang dalam FifthCtrl hanya memberi kesan kepada pengguna pembolehubah dalam FifthCtrl
  
• ● Menukar nilai input dalam SixthCtrl hanya memberi kesan kepada pengguna pembolehubah dalam SixthCtrl dan tidak menjejaskan pengguna pembolehubah dalam FifthCtrl
  
• ● Mengklik butang dalam SixthCtrl hanya memberi kesan kepada pengguna pembolehubah dalam SixthCtrl

■ Kembalikan pembina dalam Provider dengan medan cache dan tetapkan ia kepada pembolehubah Skop

 .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;
  }];
 })

Dalam halaman:

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

Di atas,

• ● Tukar nilai input dalam SeventhCtrl, dan pada masa yang sama mempengaruhi pengguna pembolehubah dalam SeventhCtrl dan EighthCtrl
• ● Klik butang dalam SeventhCtrl untuk mempengaruhi pengguna pembolehubah dalam SeventhCtrl dan EighthCtrl secara serentak
• ● Tukar nilai input dalam EighthCtrl, dan pada masa yang sama mempengaruhi pengguna pembolehubah dalam SeventhCtrl dan EighthCtrl
• ● Klik butang dalam EighthCtrl untuk mempengaruhi pengguna pembolehubah dalam SeventhCtrl dan EighthCtrl secara serentak

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.