47

我的routeProvider已将reloadOnSearch设置为false：

 $routeProvider
     .when(
        "/film/list",
         {
          templateUrl: '/film/list.html', 
          controller: FilmListController,
          reloadOnSearch: false
          } 
          ....

  )

我这样做是因为我不希望在查询字符串更改后重新加载整个控制器，但我仍然使用它并且 url 看起来像这样film/list?sort=isbn&order=asc&offset=0：现在，每当查询字符串更改时，我想从我的控制器调用一个函数。所以我尝试在控制器中设置一个$watch ：

$scope.location = $location;
$scope.$watch( 'location.search()', function( search) {
        $scope.list();
 });

但这不起作用。如果我设置$watch来观察查询字符串的单个参数的变化，那么它就可以工作。但我不想为查询字符串的每个参数设置 $watch。我现在使用的解决方案是这样的：

$scope.location = $location;
$scope.$watch( 'location.url()', function( url ) {
    if($location.path() == '/film/list')
        $scope.list();
 });

因此，我没有查看搜索，而是查看整个 url，然后检查路径是否是我在routeProvider中设置的路径以有条件地调用该函数。我不喜欢这个解决方案是我必须明确键入要匹配的 $location.path 的值。

谁能提出一个更好的解决方案，也许可以解释一下为什么$watch不适用于$location.search()？

4

6 回答 6

109

如果您不使用 Angular 的路由解析，或者您只想知道 $location 何时更改，则有一个事件就是为了这个目的

$rootScope.$on('$locationChangeSuccess', function(event){
        var url = $location.url(),
            params = $location.search();
})
于 2013-05-16T02:09:07.397 回答
79

您可以在控制器中侦听$routeUpdate事件：

$scope.$on('$routeUpdate', function(){
  $scope.sort = $location.search().sort;
  $scope.order = $location.search().order;
  $scope.offset = $location.search().offset;
});
于 2013-02-26T17:52:21.973 回答
27

Stewies 的答案是正确的，您应该为此收听$routeUpdate事件，因为它更有效。

但是要回答为什么您的手表不工作；当您观看时location.search()，您正在观看搜索方法返回的引用是否相同。每次你调用它时它都会返回对同一个对象的引用，这就是你的手表不触发的原因。也就是说，即使搜索参数发生变化，返回的对象仍然是同一个对象。为了解决这个问题，您可以将 true 作为第三个参数传递给$watch. 这将告诉 Angular 按值进行比较，而不是参考。但是在创建这样的手表时要小心，因为它们会消耗更多的内存，并且需要更长的时间来执行。所以这就是为什么你应该像斯图伊所说的那样去做。

于 2013-02-26T19:26:18.287 回答
12

采用

$scope.$watch(function(){ return $location.search() }, function(params){
    console.log(params);
});

反而。

于 2014-12-03T14:21:11.457 回答
1

routeUpdate在控制器中观察这样的变化：

 $scope.$watch('$routeUpdate', function(){
     $scope.sort = $location.search().sort;
     $scope.order = $location.search().order; 
 });
于 2014-02-10T21:44:14.240 回答
1

$watch(watchExpression, listener, [objectEquality]);

watchExpression => 应该是

  1. 评估为表达式的字符串或
  2. 以当前作用域为参数调用的函数

所以在这里，您应该将第一个参数作为函数传递。

JavaScript 示例 =>

$scope.$watch (
                function () { return $scope.$location.search(); };
                function (value) { console.log(value); } 
              );

打字稿示例 => 

this.$scope.$watch (
                     () => { return this.$location.search(); },
                     (value: any) => { console.log(value); }
                   ) ;

这确实对我有用。

于 2018-05-22T12:03:31.553 回答