Question

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

以下是一个场景：

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

这是另一种情况：

假设我已导航到/ roller路径并刷新浏览器。
我点击一个人来选择它。
我导航到/ lists路径，也选择了Person。
我导航回/滚轮路径，仍然选中该人员。

这两种情况都不一致。从本质上讲，这种行为是不可预测的（我对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>

lists.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>

roller.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>

roller.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();
    }
  }
}])

styles.css的

a.selected-true { color: red }

编辑包含@ jpmorin建议的实现

补充问题

在使用工厂消耗其他工厂的数据时，如何使用基于promises的方法？

列表-factory.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()返回的值是一个承诺。除了用我自己的“类”（这通常是首选项）包装这些组件之外，还有另一种限制这种跨厂知识的方法吗？

Answer 1

我使用$q工厂中的$timeout和Person创建了一个试图模拟数据库调用的演示。

DEMO http://plnkr.co/edit/Q5NbIuj2JUMxjf8OkT8J?p=preview

在第一次调用时，将从数据库中请求数据，然后将其缓存以供下次调用。由于它们是对象，并且它们的引用通过您的应用程序传递，因此您在其他任何地方都可以使用您所做的任何修改。这里我们使用promises，因为它是异步调用，我们不知道数据何时可用。因此，在您的控制器中，您必须使用以下方法等待承诺的回调：

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

第一次通话会有一个小延迟，但接下来会立即使用缓存数据。

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

编辑包含@ jpmorin建议的实现

补充问题

1 个答案: