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

前端之家收集整理的这篇文章主要介绍了javascript – 使用AngularJS的多个视图中的相同数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
也许有人可以帮助我一点点.我必须在多个视图之间共享数据.因为这是一个学校项目,我必须使用AngularJS,但我是新手,我不知道从哪里开始.该计划的工作原理如下:

用户(客户)可以在餐厅预订餐桌. (第一页)

用户(员工)可以将订单添加到保留表中. (第二页)

当客户从第一页预订表时,该表将添加到第二页,以便员工可以向其添加订单.

也许有人可以在我的路上帮助我一点点.

解决方法

由于您是 angularjs的新手,因此更简单的方法是使用$rootScope在控制器(以及与它们关联的视图)之间共享数据.

这是一个例子:

@H_301_16@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','$scope' function ($rootScope,$scope) { // Only available inside first.html $scope.bazUser = { name: 'Baz' }; // Add to global $rootScope.users.push($scope.bazUser); }]) .controller('SecondCtrl',$scope) { console.log($rootScope.users); // [{ name: 'Foo' },{ name: 'Bar' },{ name: 'Baz' }]; }]);

以second.html为例

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

猜你在找的JavaScript相关文章