배열 변경시 $ watch가 트리거되지 않음

배열 변경시 $ watch가 트리거되지 않음

---

내 $watch트리거가 발생하지 않는 이유를 알아 내려고합니다 . 다음은 관련 컨트롤러의 스 니펫입니다.

$scope.$watch('tasks', function (newValue, oldValue) {
    //do some stuff
    //only enters here once
    //newValue and oldValue are equal at that point
});

$scope.tasks = tasksService.tasks();

$scope.addTask = function (taskCreationString) {
    tasksService.addTask(taskCreationString);//modifies tasks array
};

내 견해로 tasks는 길이가 다음과 같이 제한되어 있으므로 올바르게 업데이트되고 있습니다.

<span>There are {{tasks.length}} total tasks</span>

내가 무엇을 놓치고 있습니까?

---

시도 $watch('tasks.length', ...)나 $watch('tasks', function(...) { ... }, true).

기본적으로 $ watch 는 객체 동등성을 확인하지 않고 참조 용으로 만 확인합니다. 따라서 $watch('tasks', ...)항상 변경되지 않는 동일한 배열 참조를 반환합니다.

업데이트 : Angular v1.1.4는 이 경우를 처리하기 위해 $ watchCollection () 메서드를 추가합니다 .

Shallow는 객체의 속성을 감시하고 속성이 변경 될 때마다 발생합니다 (배열의 경우 이것은 배열 항목을 감시 함을 의미하고 객체 맵의 경우 속성 감시를 의미 함). 변경이 감지되면 listener콜백이 실행됩니다.

---

@Mark의 아주 좋은 대답입니다. 그의 답변 외에도 $watch알아야 할 중요한 기능 기능이 하나 있습니다.

함께 $watch다음 함수 선언 :

$watch(watch_expression, listener, objectEquality)

$watch 리스너 현재의 값에만 함수가 호출됩니다 시계 식 (귀하의 경우가있다 'tasks')와에 이전 호출 시계 표현이 동일하지 않습니다. Angular는 나중에 비교하기 위해 객체의 값을 저장합니다. 그 때문에 복잡한 옵션을 보는 것은 메모리 및 성능에 불리한 영향을 미칩니다. 기본적으로 간단한 시계 표현 값이 더 좋습니다.

---

나는 시도하는 것이 좋습니다

$scope.$watch('tasks | json', ...)

tasks직렬화 된 배열을 문자열로 비교하므로 배열의 모든 변경 사항을 포착 합니다.

---

1 차원 배열의 경우 $ watchCollection을 사용할 수 있습니다.

$scope.names = ['igor', 'matias', 'misko', 'james'];
$scope.dataCount = 4;

$scope.$watchCollection('names', function(newNames, oldNames) {
  $scope.dataCount = newNames.length;
});

참조 URL : https://stackoverflow.com/questions/15363259/watch-not-being-triggered-on-array-change