AngleJS의 $watch 무효화 문제에 대한 자세한 설명

이 글은 주로 AngleJS의 $watch 오류 문제에 대한 해결책을 소개합니다. 관심 있는 친구들이 참고할 수 있는 내용이 있습니다.

이 기사에서는 AngleJS의 $watch 실패 문제에 대한 해결책을 간략하게 설명합니다. 이를 여러분과 공유하고 메모를 남기고 싶습니다.

$watch 메서드는 각 범위의 변수를 모니터링하는 데 도움이 됩니다.

$watch 단일 변수

숫자, 문자열 등 일반 변수의 경우 다음과 같이 직접 작성하여 변수의 변화를 모니터링하고 해당 함수를 실행할 수 있습니다.

$scope.count=1;
$scope.$watch('count',function(){
...
});

$여러 변수 감시

여러 변수의 변경 사항을 모니터링하려면 동일한 함수를 실행하면 해당 변수를 문자열로 변환하고 '+' 기호로 구분하여 모니터링할 수 있습니다

//当count或page变化时，都会执行这个匿名函数
$scope.count=1;
$scope.page=1;
$scope.$watch('count + page',function(){
...
});

$watch 객체 또는 배열

위의 두 가지 방법을 사용하여 배열을 모니터링할 때 배열의 내용이 변경되더라도 이 익명 함수가 트리거되지 않는 것을 발견했습니다. 나중에 나는 watch 함수에 실제로 세 개의 변수가 있다는 것을 발견했습니다. 첫 번째 매개변수는 모니터링해야 하는 개체이고, 두 번째 매개변수는 모니터링되는 개체가 변경될 때 호출해야 하는 함수입니다. , 기본적으로 false입니다.

세 번째 매개변수가 false인 경우 watch 함수는 실제로 배열의 주소를 모니터링하며, 배열 내용의 변경 사항은 배열 주소의 변경 사항에 영향을 미치지 않으므로 watch 기능이 실패합니다.

해결책은 나중에 세 번째 매개변수를 true로 추가하는 것입니다. (물론 이 수신 함수를 사용하여 개체나 배열을 JSON 문자열 형식의 익명 함수로 반환할 수도 있습니다.)

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch('items',function(){...},true);

또는 JSON 문자열 형식으로 객체나 배열을 반환하는 익명 함수를 모니터링하세요

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch(function(){
  return JSON.stringify($scope.items);
},function(){...});

$watch 함수의 반환 결과

코드를 작성할 때 때로는 반환을 모니터링해야 할 때가 있습니다. 결과가 바뀌어서 $watch 모니터링 기능 상태를 확인해 봤습니다.

방법 1: 모니터링 개체는 "함수 이름()" 문자열입니다. "()"를 추가하는 것을 잊지 마세요!

//未完成的任务个数
$scope.unDoneCount = function() {
  var count = 0;
  angular.forEach($scope.todoList, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};
//单选影响全选部分
$scope.$watch('unDoneCount()', function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

방법 2: 모니터링 개체에 익명 함수로 설정하고, 모니터링할 함수 반환 값(혼란...)

$scope.$watch(function(){
  return $scope.unDoneCount();//不要忘了(),要执行的啊~
}, function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

$watch 취소

watch는 성능을 많이 소모하는 것 같으니 더 이상 모니터링할 필요가 없는 시계의 경우 취소하는 것을 잊지 마세요. 정기적으로.

취소 방법은... 한참 헤매다가 찾았네요

사실 각 시계 함수에서 반환되는 결과는 이 시계의 deregisterWatch() 함수

//在chrome的控制台上，断点得到的$watch的返回值
function deregisterWatch() {
  arrayRemove(array, watcher);
  lastDirtyWatch = null;
}

그래서, 시계를 취소하려면 먼저 $watch의 반환 값을 저장하고 시계를 취소하고 싶을 때 호출하면 됩니다.

rreee

위 내용은 AngleJS의 $watch 무효화 문제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!