Wie AngularJS Model caching_AngularJS implementiert

Wie implementiert man einen Modellcache in AngularJS?

Sie können einen Konstruktor im Provider zurückgeben und ein Cache-Feld im Konstruktor entwerfen. Dieser Ansatz wird am Ende dieses Artikels vorgestellt.

Im Allgemeinen sollte das Modell einer Variablen im Bereich zugewiesen werden.

Einige weisen das Objekt direkt der Scope-Variablen zu; andere geben ein Objekt im Provider zurück und weisen es dann der Scope-Variablen zu; andere geben einen Konstruktor im Provider zurück und weisen es dann der Scope-Variablen zu. Lassen Sie uns sie in diesem Artikel einzeln erleben.

Passen Sie zunächst eine Anweisung an, um den Wert einer Bereichsvariablen durch Klicken auf eine Schaltfläche zu ändern.

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

■ Weisen Sie der Scope-Variablen ein Objekt zu

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

In Seite:

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

Oben,

• ● Das Ändern des Eingabewerts in FirstCtrl wirkt sich nur auf den Variablenbenutzer in FirstCtrl aus und hat keinen Einfluss auf den Variablenbenutzer in SecondCtrl
• ● Das Klicken auf die Schaltfläche in FirstCtrl wirkt sich nur auf die Variable user in FirstCtrl aus
• ● Das Ändern des Eingabewerts in SecondCtrl wirkt sich nur auf den Variablenbenutzer in SecondCtrl aus und hat keinen Einfluss auf den Variablenbenutzer in FirstCtrl
• ● Das Klicken auf die Schaltfläche in SecondStrg wirkt sich nur auf die Variable user in SecondStrg aus

■ Geben Sie ein Objekt im Provider zurück und weisen Sie es der Scope-Variable
zu

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

In Seite:

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

Oben,

• ● Ändern Sie den Wert der Eingabe in ThirdStrg und beeinflussen Sie gleichzeitig die Variablen user in ThirdStrg und FourthStrg
• ● Klicken Sie auf die Schaltfläche in ThirdStrg, um die Variablen user in ThirdStrg und FourthStrg gleichzeitig zu beeinflussen
• ● Ändern Sie den Wert der Eingabe in FourthCtrl und beeinflussen Sie gleichzeitig die Variablen user in ThirdCtrl und FourthCtrl
• ● Klicken Sie auf die Schaltfläche in FourthStrg, um gleichzeitig die Variablen user in ThirdStrg und FourthStrg zu beeinflussen

■ Geben Sie einen Konstruktor in Provider zurück und weisen Sie ihn der Scope-Variable zu

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

In Seite:

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

Oben,

• ● Das Ändern des Eingabewerts in FifthCtrl wirkt sich nur auf den Variablenbenutzer in FifthCtrl aus und hat keine Auswirkungen auf den Variablenbenutzer in SixthCtrl
  
• ● Das Klicken auf die Schaltfläche in FifthCtrl wirkt sich nur auf den Variablenbenutzer in FifthCtrl aus
  
• ● Das Ändern des Eingabewerts in SixthCtrl wirkt sich nur auf den Variablenbenutzer in SixthCtrl aus und hat keine Auswirkungen auf den Variablenbenutzer in FifthCtrl
  
• ● Das Klicken auf die Schaltfläche in SixthCtrl wirkt sich nur auf den Variablenbenutzer in SixthCtrl aus

■ Geben Sie einen Konstruktor in Provider mit einem Cache-Feld zurück und weisen Sie ihn der Scope-Variable
zu

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

In Seite:

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

Oben,

• ● Ändern Sie den Wert der Eingabe in SeventhCtrl und beeinflussen Sie gleichzeitig die Variablen user in SeventhCtrl und EighthCtrl
• ● Klicken Sie auf die Schaltfläche in SeventhStrg, um die Variablen user in SeventhStrg und EighthStrg gleichzeitig zu beeinflussen
• ● Ändern Sie den Wert der Eingabe in EighthCtrl und beeinflussen Sie gleichzeitig die Variablen user in SeventhCtrl und EighthCtrl
• ● Klicken Sie auf die Schaltfläche in EighthStrg, um die Variablen user in SeventhStrg und EighthStrg gleichzeitig zu beeinflussen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.