0

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

如果我使用console.log('test'); 进行测试 在$http.get请求的 .success 中，我成功地在控制台中获取了日志信息，但在$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>
4

2 回答 2

1

是的，之所以如此，是因为两个页面都有不同的控制器，导致范围不同。不能从一个范围访问变量到另一个范围。

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

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

祝你好运。

更新 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/

于 2016-04-04T08:11:05.887 回答
0

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

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

因此，在这种情况下，您有几种选择：

  1. 按照 Yogesh 的建议使用该$rootScope服务（在这种情况下接受他的回答）。

  2. 创建您自己的服务/工厂/等，执行类似于$rootScope.

    (function(){
    var historyData = {};
    myApp.factory('historyData', function() {
        return historyData;
    });
})();

    从技术上讲，您可能可以使它更有意义，但也许这些东西在一些角度指南中得到了更好的描述。

  3. 如果您有多个组件共享相同的数据，那么也许您可以在更高的级别上定义您的控制器 - 例如ons-navigator- 这样它将包含所有页面。仅当您的应用程序非常小时才可以这样做-不建议将其用于大型应用程序。

  4. 如果仅在activity.html您需要此数据时，您可以在该页面的控制器中获取它。例如：

    myApp.controller('activityController', function($scope, $http) {
    $http.get(...).success(function(data) {
        $scope.data = data;
    });
}

    但我想你仍然需要获得一些身份证。无论如何，如果您在这里提出请求可能会更好，现在您只需要 id，而不是数据。你实际上可以用var指令欺骗它。如果您提供活动页面<ons-page var="myActivityPage">，那么您将能够通过myActivityPage变量访问它。

    而你一直在寻找的东西——当你这样做的时候

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

    实际上选项保存在ons-pageof 中activity.html。

    所以你可以做

    myNavigator.pushPage("activity.html", {data: {id: 33}, animation: 'slide'});

    在另一个控制器中，您的 id 将是myActivityPage.options.data.id.

  5. 如果您仍然坚持传递所有数据而不是 id - 这是一个简单的示例。在 2.0 beta 的较新版本中（我认为从 beta 6 或 7 开始），所有方法等都pushPage返回popPage一个 promise - 它解析为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 天前发布的问题，因为它与此问题重复（当时我一定错过了）。

于 2016-04-04T11:54:57.677 回答