Измените URL-адрес без изменения представления и контроллера AngularJS.

В моем проекте AngularJS у меня есть форма с поисковым фильтром. Что я делаю, я могу выбрать фильтры, а затем нажать кнопку «Поиск». Он дает мне список результатов поиска. Из этого результата поиска у меня есть кнопка, с помощью которой я могу перейти на другую страницу. Теперь, если я нажму кнопку «Назад в браузере», он полностью перезагрузит первую страницу, не имея результатов поиска - точно так же, как новая перезагрузка страницы.

Есть ли способ изменить URL-адрес первой страницы вместе со строкой запроса, когда я нажимаю кнопку «Поиск» и нахожусь на той же странице, не меняя контроллер и представление?

Вот мой фрагмент кода:

Просмотр страницы:

<div>
    <select class="form-control" ng-options="producttype.Name></select>

</div>
<div>
    <button type="submit" class="btn btn-primary" ng-click="search()">
       Search
    </button>
</div>

В контроллере:

$scope.search = function () {
    // Search method to get results
}

URL страницы: #/Product.
Страница конфигурации:

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Product',
        {
            controller: 'ProductController',
            templateUrl: '/app/product.html'
        })

Я хочу изменить его на #/Product?ProductType=".." когда пользователь нажимает кнопку "Поиск" на той же странице. Я ссылался на link1 и link2, но не получил его. Любые предложения, как я могу достичь этого? Спасибо.


angularjs angularjs-routing
person mpatel    schedule 03.10.2014    source источник
comment
Когда вы начинаете на странице поиска, вы хотите, чтобы URL = #/Product. Но когда вы переходите на страницу результатов поиска, вы хотите, чтобы URL-адрес содержал параметры запроса, например: #/Product?ProductType=xyz. НО, вы хотите сохранить тот же контроллер и вид? Правильный?   -  person whyceewhite    schedule 04.10.2014
comment
@whyceewhite Точно.   -  person mpatel    schedule 05.10.2014

Ответы (1)


arrow_upward
0
arrow_downward 

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Product',
        {
            controller: 'ProductController',
            templateUrl: '/app/product.html',
            reloadOnSearch: false
        });

а потом в контроллере

$scope.search = function () {
    // Search method to get results
    ...
    //and after getting results
    $location.search('ProductType', someProductType);
}

ты пробовал это?

ОБНОВЛЕНИЕ
чтобы сопоставить вашу строку URL с представлением через навигацию и т. д., вам необходимо ввести $routeParams в контроллер

SomeCtrl.js

window.app.controller('SomeCtrl', ['$scope',  '$routeParams', '$location', 'SomeResourceOrService' ,
        function ($scope, $routeParams, $location, SomeResourceOrService) {
          //check if filter allready setup
          if (IsSearchFilterSetUp($routeParams))
          {
              //search and update
              SomeResourceOrService.Search({ProductType:$routeParams.ProductType},function(data)
              {
                  $scope.Products=data;
              };
          }  
          ...

и в вашем случае функция IsSearchFilterSetUp будет выглядеть примерно так

 function IsSearchFilterSetUp(routeparmas)
        {
            return routeparmas.ProductType!='';
        }

и ресурс что-то вроде этого

SomeResourceOrService.js

 window.app.factory('SomeResourceOrService',
            ['$resource',
                function ($resource) {
                   return $resource('', {},
                        {
                            Search: { method: 'GET', isArray: true, url: 'someurl' },
                            
                        }
                    );
          }]);
person Kostia Mololkin    schedule 04.10.2014
comment
Он изменил URL-адрес, но когда я нажимаю на ссылку, он переходит на следующую страницу. Теперь, когда я нажимаю кнопку «Назад» в браузере, я получаю нужный URL-адрес (/products?ProductType=2), но теряю результат поиска. Как я могу получить результаты? - person mpatel; 06.10.2014
comment
один из способов добиться этого - ввести «$ routeParams» в контроллер и при инициализации контроллера проверить параметры поиска, и если он уже установлен в «$ routeParams», выполнить поиск с обновлением представления - person Kostia Mololkin; 06.10.2014
comment
Спасибо за помощь. Но у меня есть вопрос. Какой метод поиска и обновления я должен написать внутри условия if? Также, где мне нужно определить метод IsSearchFilterSetup? - person mpatel; 06.10.2014
comment
пожалуйста, проверьте обновление, вы можете определить IsSearchFilterSetup где угодно, например, внутри определения контроллера - person Kostia Mololkin; 07.10.2014