使用 Onsenui 将数据传递到新页面答案

【问题标题】：Passing data to new page using Onsenui使用 Onsenui 将数据传递到新页面
【发布时间】：2016-04-04 07:51:46
【问题描述】：

一旦用户单击持有 myNavigator.pushPage() 请求的按钮，我将尝试调用 API 端点。但是，我无法将 $http.get 请求生成的 $scope 数据传递给新页面。

如果我在 $http.get 请求的 .success 中使用 console.log('test'); 进行测试，我成功地在控制台中获取了日志信息但是 $scope.var = 'something'; 中保存的任何数据都不会传递到页面！真的很迷茫！

$scope.historyDetails = function(id){

    var options = {
      animation: 'slide', 
      onTransitionEnd: function() {
        $http.get('http://xxx-env.us-east-1.elasticbeanstalk.com/apiget/testresult/testId/'+id).success(function(data) {    

          $scope.testscore = 'something'; // this is not getting passed to page!            

          console.log('bahh'); // But I see this in console



        });              
      } 
    };
    myNavigator.pushPage("activity.html", options);        
}

页面：

<ons-page ng-controller="HistoryController">
...

<span style="font-size:1.2em">{{testscore}} </span><span style="font-size:0.5em;color:#555"></span>

...
</ons-page>

【问题讨论】：

标签： angularjs onsen-ui onsen-ui2

【解决方案1】：

是的，因为两个页面有不同的控制器，导致不同的范围。不能从一个作用域访问另一个作用域的变量。

因此，在这种情况下，一种解决方案是使用 rootScope 服务。根作用域是 Angular 应用程序中所有作用域的父作用域。因此，您可以从任何其他范围访问根范围的变量，前提是您在该控制器中注入 $rootScope 服务。

要了解有关 rootScope 的更多信息，请查看this 链接。

祝你好运。

更新 1：

查看这些文章

http://www.dotnet-tricks.com/Tutorial/angularjs/UVDE100914-Understanding-AngularJS-$rootScope-and-$scope.html

https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

【讨论】：

【解决方案2】：

正如 Yogesh 所说，你没有得到你的值的原因是因为如果你查看 $scope.testscore 并尝试找到 $scope 定义的位置，你会看到它是控制器函数的参数（因此它只是对于该控制器）。

但是我们可以看到控制器已附加到页面并且您正在推送另一个页面。

所以在这种情况下你有几个选择：

按照 Yogesh 的建议使用 $rootScope 服务（在这种情况下接受他的回答）。
创建您自己的服务/工厂/等，执行类似于$rootScope 的操作。
```
(function(){
    var historyData = {};
    myApp.factory('historyData', function() {
        return historyData;
    });
})();
```
从技术上讲，您可能会使其更有意义，但也许这些东西在一些角度指南中得到了更好的描述。
如果您有多个组件共享相同的数据，那么也许您可以在更高的级别上定义您的控制器 - 例如 ons-navigator - 这样它将包含所有页面。仅当您的应用程序非常小时才可以这样做 - 不建议将其用于大型应用程序。
如果仅在activity.html 中需要此数据，您可以在该页面的控制器中获取它。例如：
```
myApp.controller('activityController', function($scope, $http) {
    $http.get(...).success(function(data) {
        $scope.data = data;
    });
}
```
但我猜你仍然需要获取一些 id。无论如何，如果您在这里提出请求可能会更好，现在您只需要 id，而不是数据。您实际上可以使用 var 指令来欺骗它。如果您提供活动页面<ons-page var="myActivityPage">，那么您将能够通过myActivityPage 变量访问它。

你一直在寻找的东西——当你这样做时
```
myNavigator.pushPage("activity.html", options);        
```
实际上选项保存在activity.html的ons-page中。

所以你可以这样做
```
myNavigator.pushPage("activity.html", {data: {id: 33}, animation: 'slide'});
```
在另一个控制器中，您的 id 将是 myActivityPage.options.data.id。
如果您仍然坚持传递所有数据而不是 id - 这是一个简单的示例。在 2.0 beta 的较新版本中（我认为是从 beta 6 或 7 开始），所有方法 pushPage、popPage 等都返回一个承诺 - 解析为 ons-page，让事情变得更容易。
```
$scope.historyDetails = function(id){
  myNavigator.pushPage("activity.html", {animation: 'slide'}).then(function(page) {
    $http.get('...' + id).success(function(data) {
      page.options.data = data;
    });
  });
});
```

旁注：您可能想关闭 5 天前发布的问题，因为它与这个问题重复（我当时一定错过了）。

【讨论】：