Question

我正在设置一个小方案，在这里我将显示一个包含所有相关输入的研究页面，继续搜索，获得结果然后在新页面上显示结果。所以我的架构如下：

角度模块（控制器+服务）
search.html
results.html

其中一项服务将负责启动研究并获得结果，我想在更改页面时使用此服务将数据从一个控制器传递到另一个控制器。我看到该服务的每个位置都是单例，并且一旦实例化，就不应该再次实例化。

然而，当更改页面时，我的服务被重新加载（所有js文件都被重新加载），当我尝试从服务中获取结果时，我有一个漂亮的：＆＃34;变量结果未定义＆＃34;

我的代码看起来像这样的东西：

Angularjs

angular
    .module('myapp.search_controller.services')
    .factory('SearchFares', SearchFares)
    .controller('SearchController', SearchController);
    .controller('ResultsController', ResultsController);

SearchFares.$inject = ['$cookies', '$http', 'SortFares'];
SearchController.$inject = ['$location', '$scope', 'SearchFares'];
ResultsController.$inject = ['$location', '$scope', 'SearchFares'];

function SearchFares($cookies, $http) {
    var results = [];

    var SearchFares = {
        CheapestDests: CheapestDests,
        GetResults: GetResults,
    };
    return SearchFares;

    function SetResults (params) {
         if (params) { 
             results = params;
             return true;
         } 
    }

    function GetResults () {
         return results;
    }

    function CheapestDests(params) {
        // do whatever you want with params then set results
        if (SetResults(params)) {
            window.location = '/results.html';
        }
    };
}

function SearchController($location, $scope, SearchFares) {
    // mapped to search.html with the ng-controller directive
    // blablabla do something with the scope - then call the service 
    // On click, launch the search
    $scope.search = search;
    function search() {
        SearchFares.CheapestDests({something: 'somewhere'});
    }
}

function ResultsController ($location, $scope, SearchFares) {
    // mapped to results.html with the ng-controller directive
    $scope.results = SearchFares.GetResults();
    // blablabla process the data
}

HTML - search.html

<div ng-cloak class="row">
    <form role="form" ng-submit="search()" ng-controller="SearchController" >
      <!-- Fill up the input then push the bouton search
      --- -->
    </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script type="text/javascript" src="{% static 'js/search_controller.module.js' %}"></script>

HTML - results.html

<div ng-cloak class="row">
    <div" ng-controller="ResultsController" >
      <!-- Do what you need to do with $scope.results but here it is undefined 
      --- -->
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script type="text/javascript" src="{% static 'js/search_controller.module.js' %}"></script>

我无法避免将服务重新调整，然后将var结果设置为undefined（var results = {}）。有没有办法，使用服务，在更改页面位置时在控制器之间传递数据？

Merci：）

Aldeen

Answer 1

您正在使用window.location =“/ whatever”切换页面。这实际上会在执行此操作时将所有服务和工厂重新加载到初始状态，因为这实际上类似于页面重新加载。

如果你想在另一个页面中获得结果，你应该使用ui-router或ngRoute或类似的东西，只需切换视图，这样工厂就不会重新加载。

我看到你的模块中已添加了angular-routes脚本。因此，只需将搜索和结果转换为两个ng视图，然后使用

在它们之间切换

$location.path('/whatever').

这样，当你切换视图时你的foctory不会重新加载

Angularjs - 在更改html页面时重新安装服务

Angularjs

HTML - search.html

HTML - results.html

1 个答案: