Question

我当前正在为我的Web应用程序使用一个控制器。数据从JSON文件加载并通过ng-repeat显示给用户。当用户进行选择时，范围内只有用户选择的数据。

我希望能够保留相同的范围数据，并在不同的网页（或使用UI-Router的状态）中使用它。

我已经研究过使用ui-router，但似乎每次状态更改时都会刷新控制器。

由于设计要求，我宁愿使用ui-router。

我的控制器代码的一部分：

(function() {

"use strict";

angular
.module("parkit", ["ngMap"])
.controller("parkitController", function($scope, $rootScope, $http, 
parkitFactory, NgMap) {

    parkitFactory.getSpots().then(function(spots) {
      $scope.spots = spots.data;

    });

    $scope.showSpot = function(spot) {
      $scope.spot = spot;
    }

    });


})();

用于加载JSON数据的工厂代码：

(function() {

"use strict";

angular.module("parkit")
.factory("parkitFactory", function($http) {

    function getSpots() {
        return $http.get('/data/spots.json');
    }

    return {
    getSpots: getSpots
    }

    });

})();

Answer 1

如前所述，您可以使用工厂或服务来跟踪所选项目。这样会将所选的值存储在服务/工厂的实例中，因此，如果有人刷新页面，则会丢失该值。

一种更有弹性且在我看来很不错的解决方案，是将选定的项目添加为ui-router中的状态参数。使用这种方法，您还可以深层链接到某些选定的状态，并且如果有人刷新页面，则仍将选择相同的项目，就像您将状态参数添加到url中一样。

请参阅文档中的URL参数：https://github.com/angular-ui/ui-router/wiki/URL-Routing

Answer 2

您可能会在工厂函数中创建一个新属性来跟踪所选项目。当用户进行选择时，请设置该属性。在需要使用数据的任何地方获取其他组件中的属性。

Answer 3

使用 $ rootScope 而不是 $ scope 保存数据，这将使您可以在同一域的控制器中的任何地方使用它。

示例： $ rootScope.yourData = yourData; ，然后您可以将 $ rootScope.yourData 分配给同一域中的任何控制器。

如何将存储在控制器中的数据从一页传递到另一页

3 个答案: