在AngularJS中使用多个视图显示相同的数据。

16 浏览
0 Comments

在AngularJS中使用多个视图显示相同的数据。

也许有人可以帮我一点点。我需要在多个视图之间共享数据。因为这是一个学校项目，我必须使用AngularJS，但是我对它很陌生，不知道从哪里开始。程序的工作方式如下：

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

用户（员工）可以向预订的桌子添加订单。（第二页）

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

也许有人可以在我前进的路上给我一点帮助。

0

2 答案

0 Comments

问题的出现原因是因为AngularJS的服务是单例的，当服务被注入时，工厂函数只会被调用一次。假设你有一个路由表，因为你提到了多个页面。

解决方法是在工厂函数中创建一个实例对象，并将其保存在一个变量中。每次注入该服务时，返回这个实例对象。这样，在不同的控制器中注入该服务后，可以共享同一个实例对象，并且可以在不同页面之间传递数据。

具体的代码如下：

angular.module('services', [])
.factory('aService', function() {
  var shinyNewServiceInstance;
  //构造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实例对象，所以你可以在第一个页面中设置一些属性，并在第二个页面中使用它。

希望这可以帮到你！

0
0 Comments

问题的出现原因：

- 因为使用了$rootScope来共享数据，所以主控制器中的数据在整个应用中都可用。

解决方法：

- 在主控制器中使用$rootScope将数据添加到全局范围内，这样其他控制器和视图也可以访问到这些数据。

- 可以在其他控制器中使用$rootScope来添加和访问这些数据。

文章正文：

由于你对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) {
  // 将在整个应用中都可用
  $rootScope.users = [
    { name: 'Foo' },
    { name: 'Bar' }
  ];
}])
.controller('FirstCtrl', ['$rootScope', '$scope' function ($rootScope, $scope) {
  // 只在first.html中可用
  $scope.bazUser = { name: 'Baz' };
  // 添加到全局范围内
  $rootScope.users.push($scope.bazUser);
}])
.controller('SecondCtrl', ['$rootScope', '$scope' function ($rootScope, $scope) {
  console.log($rootScope.users); // [{ name: 'Foo' }, { name: 'Bar' }, { name: 'Baz' }];
}]);

在second.html中：

    
  
  • {{user.name}}
    •

我有点困惑。为什么主控制器在任何地方都可用？因为你使用了$rootScope，告诉它数组users在全局范围内可用。

抱歉如果评论让你困惑了。主控制器只在'/'路由（即main.html渲染时）调用。$rootScope是一个类似单例的对象，你可以从任何其他控制器中引用它。因此，你可以在整个应用中使用以前添加的对象（及其值）。好处是所有添加到$rootScope的东西也立即在所有视图中可用（即使视图没有任何控制器），而且你不需要定义它。服务/工厂在应用扩展时也是一个很好的选择。

我现在明白了rootScope。在我的应用程序很小并且保持小的情况下使用rootScope是一个好主意。当我计划制作一个更大或可扩展的应用程序时，服务或工厂是更好的选择。

0