我正在开发一个使用 AngularJS 从 JSON 后端提供数据的示例 Rails 应用程序。代码如下所示。我在两条路线之间共享工厂数据时遇到问题，每条路线都由一个单独的控制器控制（在本例中实际上是相同的）。
这是一个场景：
- 假设我已经导航到 /lists 路径并刷新了浏览器。我的人员列表将出现。
- 我单击一个人，这会将其切换为选中状态并以红色突出显示。
- 我导航到 /roller 路径，但未选择该人。
- 我导航回 /lists 路径，但此处不再选择 Person。
- 我在不刷新浏览器的情况下重复这些步骤，现在可以选择任何人。
这是另一种情况：
- 假设我已经导航到 /roller 路径并刷新了浏览器。
- 我点击一个人来选择它。
- 我导航到 /lists 路径，该 Person 也被选中。
- 我导航回 /roller 路径，该人仍处于选中状态。
两种情况都不一致。从本质上讲，这种行为是不可预测的（我对 Angular 内部工作的理解有限）。两条路线在导航离开时将保持选择或不保持选择。我想知道 Angular 中发生了什么，以便我可以找到这个用例的可靠替代方案。
（index.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'
});
}]);
roll_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 建议的实现
补充问题
当使用一个工厂来使用另一个工厂的数据时，我将如何使用基于 Promise 的方法？
列表工厂.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 的上述实现成功地解决了我原来的问题的另一半（我缩小了它以简化示例）。但是，我很担心让这个“列表”工厂知道返回的值Person.all()是一个承诺。除了用我自己的“类”（通常是首选）包装这些组件之外，还有另一种限制这种跨工厂知识的方法吗？