使用AngularJS多个视图相同的数据 [英] Same data in multiple views using AngularJS

问题描述

也许有一个人谁可以帮我一点点。我给大家分享多个视图之间的数据。因为它是一所学校的项目，我必须使用AngularJS，但我是新来的，而且我不知道从哪里开始。该项目工程如下：

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:

用户（客户）必须预订餐桌在餐厅的可能性。 （第一页）

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.

推荐答案

既然你是新来angularjs比较简单的方法是使用$ rootScope到你的控制器（和与之相关的意见）之间共享数据。

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).

下面是一个例子：

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例如：

inside second.html for example

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

这篇关于使用AngularJS多个视图相同的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！