Angular：保持工廠數據更新的最佳方式？

Question

好了，所以我有一個UserFactory其返回值有user屬性，像這樣：

angular.module('app') 
    .factory('UserFactory', function() { 

    return { 
     user: user 
    }; 


    function user() { 
     return { 
     age: 'test', 
     loggedIn: false 
     } 
    }; 

我在我的應用程序的幾個地方注射這一點，我希望能夠改變loggedIn財產無處不在，至少在每個控制器注入的地方。

我有兩個問題：

1. 如何改變從控制器loggedIn屬性爲它注入？即：

   angular.module('app') 
       .controller('HeaderCtrl', function ($scope, $element, $attrs, UserFactory) { 
   
   $scope.loggedIn = UserFactory.user().loggedIn; 
   
   $scope.change = function() { 
       //This doesn't work 
       UserFactory.user().loggedIn = !UserFactory.user().loggedIn; 
   }; 
   
       $scope.anotherChange = function() { 
       //This doesn't work 
       $scope.loggedIn = !$scope.loggedIn; 
   }; 
   
   }); 
   

和2

我怎麼會保持更新，並鏈接到我的數據庫中的信息user。換句話說，如果某人從另一臺計算機登錄並更改了age屬性（該屬性將在我的數據庫中更新），那麼如何將該屬性與其他計算機同步？

謝謝

Answer 1

對於第一個問題，您需要檢查並正確理解您的代碼。

在您的工廠功能中，您傳遞一個未存儲在任何地方的對象（最終）。每次調用服務時，都會傳遞一個新對象。因此，首先創建一個對象，然後傳遞它。這樣，後續的調用將始終返回相同的對象。

app.factory('UserFactory', function() { 
    var userObject = { 
     age: 25 
     loggedIn: false 
    }; 

    return { 
     get: function() { 
      return userObject; 
     }, 
     set: function (user) { 
      userObject = user; 
     }    
    }; 
}); 

如上圖所示，當你打電話給你的工廠的get()功能，您將獲得用戶的詳細信息。當您調用set()函數並傳遞最新細節時，可以覆蓋用戶對象。

對於第二個問題，實現它的最好方法是調用一個使用上述服務的函數。每次調用這個函數的路由改變。也就是說，如果用戶移動到新的頁面/路線，則調用將從後端獲得最新細節的功能，然後調用上述服務的功能來存儲最新的用戶詳細信息。

Answer 2

回答您的問題

您應該設置你的工廠，這樣的事情...

angular.module('app') 
.factory('UserFactory', function() { 

    var user = {}; 

    user.loggedIn = false; 

    user.login = function() { 
    // Logic to login your user 
    user.loggedIn = true; 
    } 

    // Now return the whole user object 
    return user; 
    // Remember anything after a return is not executed 

}); 

現在您的控制器，可以通過

訪問的loggedIn變量

UserFactory.loggedIn // will be true or false 

2. 這個人變得更強硬一些，你可以通過幾種不同的方式來做到這一點。

可能最簡單的方法是使用套接字。由於您試圖更新從數據庫中的單個更改連接的所有客戶端上的某些內容，因此您需要某種方法來強制從客戶端向客戶端進行交互，而無需客戶端詢問它。

那是什麼套接字做。您可以將其設置爲「偵聽」來自服務器的事件，並在這些事件觸發時作出反應。

或者，您可以每隔一段時間輪詢服務器，或路由更改以檢查新數據。

Answer 3

最好保持工廠更新的方法是不使用$ scope。 以下是使用共享服務在控制器之間共享數據但不使用$ scope的更高級解決方案。

HTML

<div ng-app="myApp"> 
    <div ng-controller="Controller1 as ctrl"> 
     </br> 
     <table> 
      <tr> 
       <td><B> Enter Age in Controller1</B></td> 
       <td><input type="text" ng-model="ctrl.userAge"></select></td> 
       <td><button ng-click="ctrl.userLoggedIn=true"/>Submit</td> 
      </tr> 
     </table> 
    </div> 
    <div ng-controller="Controller2 as ctrl"> 
     <table> 
      <tr> 
       <td><B> Age in controller2 : </B></td> 
       <td>{{ctrl.userAge}}</td> 
      </tr> 
      <tr>     
       <td><B> LoggedIn in controller2 : </B></td> 
       <td>{{ctrl.userLoggedIn}}</td> 
      </tr> 
     </table> 
    </div> 
</div> 

JS

(function(app) { 

    function SharedService() { 
     this.user = {}; 
    } 
     angular.extend(SharedService.prototype, { 
     getUser: function() { 
      return this.user; 
     }, 
     setUser: function(user) { 
      this.user = user; 
     } 
    }); 

    function Controller1(SharedService) { 
     this.sharedService = SharedService; 
    } 

     Object.defineProperty(Controller1.prototype, 
      'userAge', { 
       enumerable: true, //indicate that it supports enumerations 
       configurable: false, //disable delete operation 
       get: function() { 
        return this.sharedService.getUser().age; 
       }, 
       set: function(val) { 
        this.sharedService.getUser().age=val; 
       } 
      }); 

    Object.defineProperty(Controller1.prototype, 
      'userLoggedIn', { 
       enumerable: true, //indicate that it supports enumerations 
       configurable: false, //disable delete operation 
       get: function() { 
        return this.sharedService.getUser().loggedIn; 
       }, 
       set: function(val) { 
        this.sharedService.getUser().loggedIn=val; 
       } 
      }); 


    function Controller2(SharedService) { 
     this.sharedService = SharedService; 
    } 

    Object.defineProperty(Controller2.prototype, 
      'userAge', { 
       enumerable: true, //indicate that it supports enumerations 
       configurable: false, //disable delete operation 
       get: function() { 
        return this.sharedService.getUser().age; 
       }, 
       set: function(val) { 
        this.sharedService.getUser().age=val; 
       } 
      }); 

    Object.defineProperty(Controller2.prototype, 
      'userLoggedIn', { 
       enumerable: true, //indicate that it supports enumerations 
       configurable: false, //disable delete operation 
       get: function() { 
        return this.sharedService.getUser().loggedIn; 
       }, 
       set: function(val) { 
        this.sharedService.getUser().loggedIn=val; 
       } 
      }); 


    app.service('SharedService', SharedService); 
    app.controller('Controller1', Controller1); 
    app.controller('Controller2', Controller2); 

})(angular.module('myApp', []));