programing

AngularJs $watch on $location.reloadOnSearch가 false인 경우 검색이 작동하지 않음

starjava 2023. 4. 2. 09:41
반응형

AngularJs $watch on $location.reloadOnSearch가 false인 경우 검색이 작동하지 않음

루트의 routeProvider가 false로 설정되어 있습니다.

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

  )

쿼리 문자열 변경 후 컨트롤러 전체를 새로고침하고 싶지 않기 때문에 이 작업을 수행했지만 여전히 사용하고 있으며 URL은 다음과 같습니다.film/list?sort=isbn&order=asc&offset=0쿼리 문자열이 변경될 때마다 컨트롤러에서 함수를 호출합니다.그래서 컨트롤러에 $워치를 설정하려고 했습니다.

$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에 값을 입력해야 한다는 것입니다.일치시킬 경로입니다.

나은 해결책을 제안해 주실 분, $watch가 $location에 적합하지 않은 이유를 설명해 주시겠습니까?검색()?

Angular의 루트 해상도를 사용하지 않거나 $location이 변경될 때마다 알고 싶은 경우 해당 목적을 위한 이벤트가 있습니다.

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

들을 수 있다$routeUpdate이벤트:

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

찌개 정답은 맞으니까 들어주세요.$routeUpdate이벤트를 진행하도록 하겠습니다.

하지만 왜 시계가 작동하지 않는지 대답하려면location.search()검색 방법으로 반환되는 참조가 동일한지 여부를 확인합니다.그리고 호출할 때마다 동일한 물체에 대한 참조가 반환됩니다. 그래서 시계가 켜지지 않습니다.즉, 검색 매개 변수가 변경되더라도 반환되는 개체와 동일합니다.그것을 피하기 위해서, 당신은 true를 세 번째 변수로 통과시킬 수 있다.$watch그러면 Angular가 기준이 아닌 값으로 비교하도록 지시됩니다.그러나 이러한 워치는 메모리를 더 많이 소모하고 실행하는 데 시간이 더 오래 걸리므로 이러한 워치를 만들 때는 주의해야 합니다.그래서 찌개 말대로 해야 하는 거구나.

사용하다

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

대신.

의 변화를 확인하다routeUpdate컨트롤러에서는 다음과 같습니다.

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

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

watchExpression = > 중 하나여야 합니다.

  1. expression 또는 expression으로 평가된 문자열
  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); }
                   ) ;

이건 나한테 효과가 있었어.

언급URL : https://stackoverflow.com/questions/15093916/angularjs-watch-on-location-search-doesnt-work-when-reloadonsearch-is-false

반응형