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

Posted 2023-02-26

【中文标题】使用 AngularJS 的多个视图中的相同数据

【英文标题】：Same data in multiple views using AngularJS

【发布时间】：2013-05-22 08:09:58

【问题描述】：

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

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

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

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

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

【问题讨论】：

我将从 Angular 网站上的教程开始。它非常相似：它有一个模型，它显示了 Angular 提供的双向数据绑定。

网站上的 AngularJS 教程对我没有帮助。我在网上搜索过，发现在多个视图之间共享数据的最佳方式是服务。你同意吗？或者您知道在视图之间共享数据的另一种方式吗？

是的，这是一个好方法。例如，如果您想在应用程序中进行设置，您可以将它们放在 rootScope 或服务中。服务绝对是更好的解决方案。但是，您正在谈论一个模型，而这看起来不像您要放入服务中的东西。普通的旧 javascript 对象在这里似乎很有用，但我不能肯定地告诉你。也检查一下***.com/questions/16331102/…我们几天前讨论了类似的事情:)

谢谢，我会阅读并考虑解决我的问题的好方法。

【参考方案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 在您的手中，因此您可以在第一页的哈希中设置一些属性并在第二页中使用它。

【讨论】：

谢谢，我觉得这对我有很大帮助！

正确答案。谢谢！

【参考方案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>

【讨论】：

我有点困惑。为什么到处都是可用的主控制器？因为你使用了 $rootScope，它会告诉你可以使用 overyone 的用户数组是什么？

很抱歉，如果 cmets 让您感到困惑。主控制器仅在“/”路由上调用（当 main.html 呈现时）。您在此处引用的 $rootScope 就像一个可以从任何其他控制器引用的单例。因此，您可以在您的应用程序中使用之前添加的对象（及其值）。好处是添加到 $rootScope 的所有内容也可以立即在您的所有视图中使用（即使视图根本没有控制器）并且您不必定义它。服务/工厂也是一个不错的选择，尤其是当您的应用扩展时。

我想我现在了解rootScope了。使用 rootScope 是个好主意，因为我的应用程序很小而且很小。当我计划制作更大的应用程序或可扩展的应用程序时，服务或工厂是更好的选择。