javascript - 在 Angular 模板之间共享数据，如何？

Question

我有2个模板，在第一个模板中我使用该函数，在成功实现后，我想在第二个模板中获取数据。我该怎么做？两个模板使用相同的 Controller

我的第一个模板:

 <form ng-submot='vm.search(q)' class="header-search">
            <input class="header-search-input" ng-model='q'  placeholder="Search">
            <button type="button" class="btn btn-default ic-search" aria-label="Left Align" ng-click='vm.search(q)'>
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            </button>
        </form>

我的第二个模板:

<h3>Результат поиска по запросу: {{q}}</h3>
<ul ng-repeat='item in items'>
    <li>{{item.name}}</li>
</ul>

Controller :

(function() {
    'use strict';

    angular
        .module('beo.layout.controllers')
        .controller('NavbarController', NavbarController);

    NavbarController.$inject = ['$scope', '$http', '$location'];
    function NavbarController($scope, $http, $location) {

        var vm = this;

        vm.logout = logout;
        vm.search = search;

    function search(q) {
        $http.post('/api/v1/search/', {
            q: q
        }).success(function(data) {
            $location.path('/search/')
            $scope.q = q;
            $scope.items = data;
        })
    }

})();

Answer 1

我建议您使用缓存作为最佳实践。当您使用两个模板时，当您加载另一个模板时，它也会重新加载您的 Controller 。如果您在第一个模板中完成搜索，那么您可以将结果保存在缓存中，然后当您重定向到模板时，只需查看是否有任何结果，然后显示它。