将 JSON 响应重定向到另一个 html 页面 (Angular)答案

【问题标题】：Redirect the JSON response to another html page (Angular)将 JSON 响应重定向到另一个 html 页面 (Angular)
【发布时间】：2016-03-29 01:42:01
【问题描述】：

我最近才开始使用 Angular，我正在尝试将 http.get 的响应重定向到另一个 html 页面 result.html。我使用服务来共享数据：

这是我的控制器代码：

  app.controller("controller", function($scope, $http, $window, sharedProperties){
  $scope.generate = function(){
    $http.get('repositories', {params: { username : $scope.username }}).
    then(function mySucces(response) {
      $scope.error = "";
      sharedProperties.setData(response.data);
      $window.location.href = '/result.html';
    }, function myError() {
      $scope.error = "Wrong Username";
    });
  }
});

app.controller("resultController", function($scope, $window,sharedProperties){
  $scope.names = sharedProperties.getData();
  $scope.home = function() {
    $window.location.href = '/index.html';
  }
  });

这里是services.js 代码：

app.service('sharedProperties', function() {
    var data;
    return {
        getData: function() {
            return data;
        },
        setData: function(value) {
            data = value;
        },
    }
});

这是index.html 正文：

<div ng-app="App" ng-controller="controller">
    <p>
      <input type="text" ng-model="username"  placeholder="Enter username here" required>
      <button ng-click="generate()">Generate</button>
    </p>

   {{ error }}
</div>

这是我想要回复的result.html：

<div ng-app="App" ng-controller="resultController">
    <p><button ng-click="home()">Home</button></p>
    <ul>
        <li ng-repeat="x in names">
            {{ "Name: " + x.name + ", Languages: " + x.languages }}
        </li>
    </ul>
</div>

controller 通过sharedProperties 设置响应数据，所以resultController 可以使用它，但是页面重定向到result.html 后结果不显示。

更新

似乎两个控制器之间没有共享数据，console.log 显示undefined。是因为2个不同的html文件吗？还是因为redirect？

更新 2

我意识到重定向会重置所有数据，所以我将sessionStorate 用于服务：

app.service('sharedProperties', function() {

    return {
        getData: function() {
            return sessionStorage.sharedProperties;
        },
        setData: function(value) {
           sessionStorage.sharedProperties = value;
        },
    }
});

但是console.log 没有显示json的值，而是显示：

"[object Object],[object Object],[object Object],[object Object],[object Object]"

真正的价值应该是：

[{"name":"git-consortium","languages":"No Language Reported"},{"name":"hello-worId","languages":"No Language Reported"},{"name":"Hello-World","languages":"No Language Reported"},{"name":"octocat.github.io","languages":"CSS JavaScript HTML "},{"name":"Spoon-Knife","languages":"CSS HTML "}]

对此有什么想法吗？

【问题讨论】：

您的 Angular 项目实现完全错误。请先阅读并了解 angular.js。那么如果有任何问题出现在这里问。 :)
请确保您的重定向路由定义正确，有时它会重定向到默认情况..？
(1) 你为两个控制器指定了相同的名称。(2) 你想在两个控制器之间共享数据，所以使用服务/工厂，阅读它。(3) $window. location.href = 'result.html';将重定向到 result.html 并一旦重定向以下表达式 $scope.names = response.data;不会被执行。
但是即使你想用这种方式实现，你可以使用$rootScope.names=response.data然后重定向到response.html，只是一个技巧，但它可能会产生不好的后果。
感谢您的回复@shreyansh

标签： html angularjs session-storage

【解决方案1】：

即使我得到的响应是 json，我仍然必须使用 angular.toJson() 转换为 json。

这里是保存 json 数据的服务：

app.service('sharedProperties', function() {
    return {
        getData: function() {
            return angular.fromJson(sessionStorage.sharedProperties);
        },
        setData: function(value) {
           sessionStorage.sharedProperties = angular.toJson(value);
        },
    }
});

所以现在即使重定向到另一个页面，我仍然可以访问数据。

【讨论】：