使用 AngularJS 的多个视图中的相同数据

Question

也许有人可以帮助我一点。我必须在多个视图之间共享数据。因为是学校项目，所以不得不使用AngularJS，但我是新手，不知道从哪里开始。该程序的工作原理如下：

用户（客户）可以在餐厅预订餐桌。 （第一页）

用户（员工）可以将订单添加到保留表中。 （第二页）

当客户从第一页预订餐桌时，该餐桌会添加到第二页，以便员工可以向其中添加订单。

也许有人可以帮我一点忙。

Answer 1

服务是单例的，所以当服务第一次注入时，工厂中的代码会被调用一次。我假设您有一个路由表，因为您正在谈论多个页面。

如果你定义这个

angular.module('services', [])
.factory('aService', function() {
  var shinyNewServiceInstance;
  //factory function body that constructs shinyNewServiceInstance
  shinyNewServiceInstance = shinyNewServiceInstance || {foo:1};
  return shinyNewServiceInstance;
});

依赖注入到你的控制器中（简化）：

controller('ACtrl', ['aService', function(aService) {
  aService.foo += 1;
}]);

controller('BCtrl', ['aService', function(aService) {
  aService.foo += 1;
}]);

如果您每次在 ACtrl 和 BCtrl 之间导航时检查 aService.foo，您将看到该值已增加。合乎逻辑的原因是同一个 shinyNewServiceInstance 在您的手中，因此您可以在第一页的哈希中设置一些属性并在第二页中使用它。

Answer 2

由于您是 angularjs 新手，因此更简单的方法是使用 $rootScope 在您的控制器（以及与它们关联的视图）之间共享数据。

这是一个例子：

angular.module('MyApp', [])

.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/views/main.html',
      controller: 'MainCtrl'
    })
    .when('/first-page', {
      templateUrl: '/views/first.html',
      controller: 'FirstCtrl'
    })
    .when('/second-page', {
      templateUrl: '/views/second.html',
      controller: 'SecondCtrl'
    });
}])

.controller('MainCtrl', ['$rootScope', function ($rootScope) {
  // Will be available everywhere in your app
  $rootScope.users = [
    { name: 'Foo' },
    { name: 'Bar' }
  ];
}])

.controller('FirstCtrl', ['$rootScope', '$scope' function ($rootScope, $scope) {
  // Only available inside first.html
  $scope.bazUser = { name: 'Baz' };
  // Add to global
  $rootScope.users.push($scope.bazUser);
}])

.controller('SecondCtrl', ['$rootScope', '$scope' function ($rootScope, $scope) {
  console.log($rootScope.users); // [{ name: 'Foo' }, { name: 'Bar' }, { name: 'Baz' }];
}]);

以 second.html 为例

<ul>
  <li ng-repeat="user in users">{{user.name}}</li>
</ul>