Question

在我的AngularJS项目中，我有一个具有搜索过滤器的表单。我的工作是我可以选择过滤器，然后单击“搜索”按钮。它给了我一个搜索结果列表。从该搜索结果中，我有一个按钮，我可以从该按钮导航到另一个页面。现在，如果我点击＆＃34;浏览器后退按钮＆＃34;，它会完全重新加载第一页而不会有我的搜索结果 - 就像重新加载页面一样。

当我点击“搜索”按钮并且在同一页面上没有更改控制器和视图时，我有什么方法可以更改第一页的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 =＆＃34; ..＆＃34;当用户点击同一页面上的“搜索”按钮时。我提到了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);
}

你试过这个吗？

<强>更新
为了使您的网址字符串与导航等视图匹配，您需要在控制器中注入 $ 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' },

                        }
                    );
          }]);

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

1 个答案:

SomeCtrl.js

SomeResourceOrService.js