javascript - 尝试更新一个 Controller 中的工厂，并让另一个 Controller 通知它已更新？

Question

我有一个页面，其中一个 Controller 显示所有登录用户的团队，另一个 Controller 允许用户更新团队。当用户更新团队名称时，我希望显示所有团队的 Controller 注意到一个团队已更新并相应地更新它的变量。

我一直在谷歌搜索，似乎有很多问题和很多不同的方法来做到这一点。理想情况下，我希望能够只更新一个工厂变量，所有 Controller 都会注意到该值已更新。不确定这是否是 Angular 的工作方式。

例子:

var myapp= angular.module('myapp', []);

...

// This gets the teams that a user is associated with
myezteam.factory('teams', function($http) {

    // Get the teams associated with the logged in user
    return {
        getTeams: function(callback) {
            $http.get(baseUrl+'v1/teams/all' + apiKey)
                .success(function(response) {
                    callback(response);
                });
        }
    }

});

获取所有团队的 Controller

// This controller is used to set the user profile links
myapp.controller('TemplateProfileController', ['$scope', '$http'', 'teams', function($scope, $http, teams) {

    // Gets all of a user's teams from the "teams" factory
    getTeams = function() {
        teams.getTeams(function(response) {
            $scope.teams = response;    
        });
    }

    $scope.teams = getTeams();  // Call on page load

}]);

处理团队编辑的 Controller

// Controller for editing a team
myapp.controller('EditTeamController', ['$scope', '$http', '$routeParams', 'teams', function($scope, $http, $routeParams, teams) {

    // Get the team that we're editing
    getTeam = function() {    
        $http.get(baseUrl+'v1/teams/' + $routeParams.id + apiKey)
            .success(function(response) {
                $scope.team = response;
            });
    }

    // Update the team and refresh the list of all teams
    $scope.updateTeam = function() {        
        $http.post(baseUrl+'v1/teams' + apiKey, $scope.team)
            .success(function(response) {
                // NEED TO SOMEONE TRIGGER THE TempalteProfileController to get the teams from the factory again
            })
    } 

    getTeam();  // Call on page load;

}]);

Answer 1

只要理解变量和对象的区别，其实做起来很简单。

假设我有一个跟踪计数器并提供递增计数器的方法的服务:

app.factory("mySharedService", function(){
  var values = {
    mySharedValue: 0
  }; 

  return{
    getValues: function(){
      return values;
    },

    incrementValue: function(){
      values.mySharedValue++;
    }
  };
});

请注意，我不仅声明了一个简单的变量，还声明了一个对象并将我的实际值卡在该对象上。此对象引用在服务的生命周期内将保持不变，只有其中的值会发生变化。

这意味着任何调用 getValues() 的 Controller 都将收到相同的对象引用并可以在其范围内使用它:

app.controller('Controller1', function($scope, mySharedService) {
  $scope.values = mySharedService.getValues();
});

app.controller('Controller2', function($scope, mySharedService) {
  $scope.values = mySharedService.getValues();
});

app.controller('Controller3', function($scope, mySharedService) {
  $scope.values = mySharedService.getValues();
});

每当 mySharedValue 中的值发生变化时，所有 Controller 都会平等地看到它(因为它们都共享相同的对象引用)。这意味着该 Controller 中的任何绑定(bind)都将立即更新，您可以像使用任何其他范围变量一样使用 $scope.$watch()。

这是一个例子:

http://plnkr.co/edit/FA3MbfQQpiOtp5mGqqAq?p=preview

编辑:

如果你想保留封装并且只能通过提供的方法编辑值，你可以这样做:

app.factory("mySharedService", function(){
  var mySharedValue = 0;

  var values = {
    getMySharedValue: function(){
       return mySharedValue;
    }
  }; 

  return{
    getValues: function(){
      return values;
    },

    incrementValue: function(){
      mySharedValue++;
    }
  };
});