web-dev-qa-db-ja.com

reloadOnSearchがfalseの場合、$ location.searchのAngularJs $ watchは機能しません。

ルートのMyrouteProviderには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（ ）？

angularjslistenerwatch
45
MBozic

$routeUpdateコントローラーのイベント：

$scope.$on('$routeUpdate', function(){
  $scope.sort = $location.search().sort;
  $scope.order = $location.search().order;
  $scope.offset = $location.search().offset;
});
77
Stewie

Angularのルート解決を使用しない場合、または$ locationが変更されるたびに知りたい場合は、その目的のためのイベントがあります

$rootScope.$on('$locationChangeSuccess', function(event){
        var url = $location.url(),
            params = $location.search();
})
105
Le Duc Duy

Stewiesの答えは正しいです。より効率的であるため、_$routeUpdate_イベントをリッスンする必要があります。

しかし、なぜ時計が機能しないのかを答えるために。 location.search()を見るとき、検索メソッドが返す参照が同じかどうかを監視しています。また、呼び出すたびに同じオブジェクトへの参照が返されるため、ウォッチは起動しません。つまり、検索パラメーターが変更されても、返されるのは同じオブジェクトです。それを回避するには、_$watch_の3番目の引数としてtrueを渡します。これはAngularを参照ではなく値で比較するように伝えます。しかし、より多くのメモリを消費し、実行に時間がかかるため、このようなウォッチを作成するときは注意してください。スティービーは言った。

26
Anders Ekdahl

つかいます

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

代わりに。

10
Thomas Decaux

$ watch（watchExpression、listener、[objectEquality]）;

watchExpression =>は次のいずれかでなければなりません

  1. 式として評価される文字列または
  2. 現在のスコープをパラメーターとして呼び出される関数

したがって、ここでは、最初のパラメーターを関数として渡す必要があります。

JavaScriptの例=>

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

TypeScriptの例=>

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

これでうまくいきました。

1
Dilushika Weerawardhana

コントローラーでこのようなrouteUpdateの変更を監視します。

 $scope.$watch('$routeUpdate', function(){
     $scope.sort = $location.search().sort;
     $scope.order = $location.search().order; 
 });
1
CodeOverRide