javascript 使用 AngularJS 的多个视图中的相同数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16686633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Same data in multiple views using AngularJS
提问by P Griep
Maybe there is someone who can help me a little bit. I have to share data between multiple views. Because it is a school project, I have to use AngularJS, but I am new to it and I don't know where to start. The program works as follow:
也许有人可以帮助我一点。我必须在多个视图之间共享数据。因为是学校项目，所以不得不使用AngularJS，但是我是新手，不知道从何下手。该程序的工作原理如下：
User (customers) have the possibility to reserve a table in a restaurant. (first page)
用户（客户）可以在餐厅预订餐桌。（第一页）
User (employees) have the possibility to add orders to a reserved table. (second page)
用户（员工）可以将订单添加到保留表中。（第二页）
When a customer reserve a table from the first page, the table is added to the second page so that an employee can add orders to it.
当客户从第一页预订表格时，该表格将添加到第二页，以便员工可以向其中添加订单。
Maybe there is someone who can help me a little bit on my way.
也许有人可以在我的路上帮助我一点。
采纳答案by SergeL
Since you are new to angularjs an easier approach would be to use $rootScope to share data between your controllers (and the views associated with them).
由于您是 angularjs 的新手，一个更简单的方法是使用 $rootScope 在您的控制器（以及与它们关联的视图）之间共享数据。
Here is an example:
下面是一个例子：
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' }];
}]);
inside second.html for example
例如在 second.html 里面
<ul>
<li ng-repeat="user in users">{{user.name}}</li>
</ul>
回答by Foo L
Services are singletons, so when the service is injected the first time, the code in the factory gets called once. I'm assuming you have a routing table, since you are talking about multiple pages.
服务是单例的，所以当服务第一次被注入时，工厂中的代码会被调用一次。我假设您有一个路由表，因为您正在谈论多个页面。
If you define this
如果你定义这个
angular.module('services', [])
.factory('aService', function() {
var shinyNewServiceInstance;
//factory function body that constructs shinyNewServiceInstance
shinyNewServiceInstance = shinyNewServiceInstance || {foo:1};
return shinyNewServiceInstance;
});
Dependency inject it into your controllers (simplified):
依赖将它注入你的控制器（简化）：
controller('ACtrl', ['aService', function(aService) {
aService.foo += 1;
}]);
controller('BCtrl', ['aService', function(aService) {
aService.foo += 1;
}]);
If you examine aService.foo each time you navigate between ACtrl & BCtrl, you will see that the value has been incremented. The logical reason is that the same shinyNewServiceInstance is in your hand, so you can set some properties in the hash from the first page & use it in the second page.
如果每次在 ACtrl 和 BCtrl 之间导航时都检查 aService.foo，您将看到该值已增加。合乎逻辑的原因是相同的 ShinyNewServiceInstance 在您手中，因此您可以在第一页的哈希中设置一些属性并在第二页中使用它。
