使用工厂时控制器/模板不共享相同的状态

我正在开发一个示例Rails应用程序，使用AngularJS从JSON后端馈送。下面列出了代码。我在两条路由之间共享工厂数据时遇到问题，每条路由由单独的控制器控制（在本例中实际上是相同的）。

下面是一个场景：

• 假设我已经导航到/list 路径并刷新了浏览器。我的人员列表将出现。
• 我单击一个人，它会将其切换为选中并以红色突出显示。
• 我导航到/roller 路径，但未选择该人员。
• 我导航回/list 路径，但那里不再选择"人员"。
• 我在不刷新浏览器的情况下重复这些步骤，现在保持对任何人员的选择。

这是另一种情况：

• 假设我已经导航到/roller 路径并刷新了浏览器。
• 我单击"人员"以选择它。
• 我导航到/list 路径，其中也选择了该人员。
• 我导航回/roller 路径，其中该人员仍处于选中状态。

这两种情况都不一致。从本质上讲，这种行为是不可预测的（我对 Angular 内部工作原理的理解有限）。两条路线在驶离时要么保留选择，要么不保留选择。我想知道 Angular 中发生了什么，以便我可以找到这个用例的可靠替代方案。

（索引正文.html）

<header>
  <nav>
    <a id="logo" href="/#/"><h2>Roller</h2></a>
    <ul class="links">
      <li><a href="/#/people">People</a></li>
      <li><a href="/#/lists">Lists</a></li>
    </ul>
  </nav>
</header>
<div id="main" ng-app="RollerApp">
  <ng-view></ng-view>
</div>

列表.html

<div ng-controller="ListCtrl">
  <ul>
    <li ng-repeat="person in people">
    <a class="selected-{{ person.selected }}" ng-click="toggleSelect( person )">{{ person.name }}</a>
    </li>
  </ul>
</div>

滚筒.html

<div ng-controller="RollerCtrl">
  <ul>
    <li ng-repeat="person in people">
    <a class="selected-{{ person.selected }}" ng-click="toggleSelect( person )">{{ person.name }}</a>
    </li>
  </ul>
</div>

滚筒.js

rollerApp = angular.module('RollerApp', ['People']);
rollerApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
  $routeProvider.when('/', {
    templateUrl: 'assets/roller.html'
  }).when('/lists', {
    templateUrl: 'assets/lists.html'
  }).otherwise({
    template: 'Not Found'
  });
}]);

roller_ctrl.js

rollerApp = angular.module('RollerApp');
rollerApp.controller('RollerCtrl', ['$scope', 'Person', function($scope, Person){
  $scope.people = Person.all();
  $scope.toggleSelect = function(person){
    person.selected = !person.selected;
  };
}]);

list_ctrl.js

rollerApp = angular.module('RollerApp');
rollerApp.controller('ListCtrl', ['$scope', 'Person', function($scope, Person){
  $scope.people = Person.all();
  $scope.toggleSelect = function(person){
    person.selected = !person.selected;
  };
}]);

person_factory.js

people = angular.module('People', ['ngResource']);
people.factory('Person', ['$resource', '$q', function($resource, $q){
  var _person = $resource('people/:id', {id: '@id'}, {});
  var people = null;
  function query(){
    if(!people){
      var deferred = $q.defer();
      people = _person.query(function(success){
        deferred.resolve(success);
      }, function(failure){
        deferred.reject(failure);
      });
      return deferred.promise;
    }else{
      return people;
    }
  }
  return {
    all: function(){
      return query();
    }
  }
}])

样式.css

a.selected-true { color: red }

经过编辑以包括@jpmorin建议的实施

补充问题

使用

工厂使用来自另一个工厂的数据时，如何使用基于承诺的方法？

列表工厂.js

lists = angular.module('Lists', ['ngResource']);
lists.factory('List', ['$resource', '$q', 'Person', function($resource, $q, Person){
  var _list = $resource('lists/:id', {id: '@id'}, {});
  var people = Person.all();
  var lists = null;
  function query(){
    if(!lists){
      var deferred = $q.defer();
      lists = _list.query(function(success){
        success.forEach(function(list){
          people.then(function(value){
            addPeopleToList(list, value);
          });
        });
        deferred.resolve(success);
      }, function(failure){
        deferred.reject(failure);
      });
      return deferred.promise;
    }else{
      return lists;
    }
  }
  function personById(id, people){
    return people.filter(function(person){ return id === person.id })[0];
  }
  function addPeopleToList(list, people){
    ids = list.people.map(function(person){ return person.id });
    list.people = ids.map(function(id){ return personById(id, people) });
  }
  return {
    all: function(){
      return query();
    }
  }
}])

上面的List实现在我的原始问题的另一半中成功（我缩小了它以简化示例）。但是，我谨慎地让这个"List"工厂知道从Person.all()返回的值是一个承诺。除了用我自己的"类"（通常是首选项）包装这些组件之外，还有没有另一种方法来限制这种跨工厂知识？

Person.all().then(function(data) { 
    $scope.people = data;
});