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', []));