주문 후 각도 범위가 업데이트되지 않습니다.

Question

테이블을 렌더링하는 각 구성 요소를 구축 중이며 정렬 기능과 관련된 몇 가지 문제가 있습니다. 디버거와 추적에 내가 해 orderBy가 있다는 발견하지만,이 작동하지 않았다

ng-repeat="row in $ctrl.list | orderBy:$ctrl.listState.sortBy:$ctrl.listState.sortReverse" 

: 나는 원래 통해 목록을 정렬하려고

$scope.listState = { 
    sortBy: '<string>', 
    sortReverse: <bool>, 
    headings: {...}, 
    list: [ 
     { 
      rowCols: { 
       user: 'timfranks@gmail.com', 
       name: 'Tim Franks', 
       since: '11/6/12' 
      } 
      rowState: {...} 
     }, 
     { 
      { 
       user: 'albertjohns@sbcglobal.net', 
       name: 'Alber Johns', 
       since: '11/12/13' 
      }, 
      rowState: {...} 
     }, 
     { 
      { 
       user: 'johnsmith@sine.com', 
       name: 'John Smith', 
       since: '7/28/14' 
      }, 
      rowState: {...} 
     } 
    ] 
}; 

:이 경우 범위는 다음과 같습니다 사실 올바른 인수를 얻고 올바르게 정렬 된 목록을 반환합니다. 그냥 확실하게, 나는이 같은 내 컨트롤러에 해 orderBy를 사용하도록 코드를 변경 :

this.listState.list = _this.orderBy(listState.list, 'rowCols.' + listState.sortBy, listState.sortReverse); 

이 (생성자 내에서 호출) 처음으로 작동하지만, 다음 작동을 멈 춥니 다. 나는 이것이 내가 완전히 이해하지 못하는 Angular의 범위의 일부분이라는 것을 확신한다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

이 그것을 알아 냈다. 문제는 속성 지시문을 사용하여 목록 행을 렌더링하고 속성 지시문 ng-repeat이 같은 요소에 있다는 것입니다. 이로 인해 두 지시문간에 범위 충돌이 발생했습니다. 내 지시문을 ng-repeat 내의 div로 옮겼습니다. 제대로 작동합니다.

Answer 2

ng-repeat 표현 의 필터를 사용하면 원본 모델은 업데이트되지 않고 배열 복사본이 만들어집니다.

당신은 this.listState.list = _this.orderBy(...)과 함께 올바른 길을 걷고 있습니다. 단지 한 번만 호출된다는 의미가 있습니다. $watchCollection 경우 내가 기억 할 수

$scope.$watchCollection('listState.list', function listChanged(newList, oldList){ 
    $scope.listState.list = _this.orderBy(...); 
}); 

:

listState.list 모델은 컨트롤러를로드 한 후 새 값을 받고 그리고 당신이 그 새 값으로 의지하려는 경우, 당신은 아마 같은 것을 사용할 것 순서가 변경되면 변경을 등록하려고하지만, 당신이 그 코드를 무한 루프에 끝날 경우, 당신은 같은 차단기를 둘 수 있었다 :

var listSorting = false; 
$scope.$watchCollection('listState.list', function listChanged(newList, oldList){ 
    if(!listSorting){ 
     listSorting = true; 
     $scope.listState.list = _this.orderBy(...); 
     $timeout(function resetSortBlock(){ // try it without the $timeout to see if it will work 
      listSorting = false; 
     }); 
    } 
});