【问题标题】:angularjs passing scope between routesangularjs在路由之间传递范围
【发布时间】:2015-07-17 08:29:12
【问题描述】:

我想做类似的事情:

1. Set $scope.val = <Some dynamic data> 
2. Click a link and be routed to a new template (with the same controller). 
3. $scope.val should still be the same value as it was on the last page.

以某种方式为范围持久化数据是解决此问题的正确方法,还是有其他方法?您甚至可以创建一个在路由之间具有持久范围的控制器,当然除了将其保存在数据库中。

【问题讨论】:

  • 不在数据库中,但 cookie 或 localStorage 可以提供帮助
  • 嗨,Nimesh,你发现了吗?一个 js fiddle 或一个 plunker 会有所帮助。

标签: angularjs controller routes scope angular-routing


【解决方案1】:

您可以在控制器之间共享数据,但不能使用简单的$scope

您可以使用services 完成此任务。

每当您访问新路由时,都会重新创建控制器。但是服务是您的应用程序中的单例。因此,可以从每个新控制器访问存储在服务中的数据。

你的服务可以很简单,只返回一个空对象:

app.factory('sharedData', function() {
  return {
    name: 'Daniel'
  };
});

然后在您的控制器中,您可以简单地将服务中的这个数据对象设置为$scope

app.controller('MainController', function($scope, sharedData) {
  $scope.data = sharedData;
});

这是一个有效的Plunker

【讨论】:

  • 能否给一个使用服务推送动态数组的demo?
  • 这个问题得到了一个正常工作的 Plunker 的回答。现在您添加到您的问题。下一步是什么?你能做我的网站吗?
  • 我想从当前页面(假定为 route1.html)推送动态数组项并在您的演示中将其推送到第二页(假定为 route2.html)...
【解决方案2】:

您可以将数据附加到 $rootScope,但您想使用service

服务提供了一种在 Angular 应用程序的整个生命周期内保存数据的方法。这是一种在控制器之间以一致的方式通信数据的方式。

创建这样的服务:

var DynamicData = angular.module('myApp', [])
.service('GetDynamicData', function () {
    $scope.data = [];
    $http.get('yourApiUrl/data.json').then(function(res){
     $scope.data = res.data;
    });
});

然后你可以在其他控制器中使用这个服务,像这样:

var myApp = angular.module('myApp', ['GetDynamicData']);
 myApp.controller('DataController', function ($scope, GetDynamicData) {
    //provide some business logic on $scope.data

 }
});

您可以通过服务获取一些动态数据(使用该服务,然后将该服务注入您想要使用该数据的控制器中。查看the provider docs。

【讨论】:

  • 感谢您的回复,能否请您使用 plunkr 创建演示并分享链接?
  • 你能举出使用上述服务推送静态数组项的例子吗?
猜你喜欢
  • 2016-04-10
  • 1970-01-01
  • 1970-01-01
  • 2014-07-06
  • 1970-01-01
  • 1970-01-01
  • 2014-06-30
  • 1970-01-01
  • 2015-03-30
相关资源
最近更新 更多