更改 URL 而不更改视图和控制器 AngularJS

Question

在我的 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
}

页面的网址是#/Product。
配置页面是：

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

当用户单击同一页面上的搜索按钮时，我想将其更改为 #/Product?ProductType=".."。 我提到了link1 和link2，但没有得到它。 有什么建议我怎样才能做到这一点？ 谢谢。

Answer 1

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' },
                            
                        }
                    );
          }]);