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＆amp; amp;之间导航时检查aService.foo BCtrl，您将看到该值已递增。逻辑上的原因是你手中有相同的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>

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

2 个答案: