AngularJS : 자동으로 모델 변화 감지

모델의 값이 변경 될 때마다 자동으로 일부 코드를 실행 (예 : 서버에 데이터 저장)하는 것과 같은 작업을하고 싶다고 가정 해 보겠습니다. ng-change모델을 변경할 수있는 각 컨트롤에 대해 이와 같은 것을 설정하여이를 수행하는 유일한 방법 입니까?

즉, 뷰를 사용하면 명시 적으로 아무것도 연결하지 않고도 모델이 변경되면 상황이 올바르게 변경됩니다. 서버에 저장하는 코드를 실행할 수있는 것과 유사한 것이 있습니까? 같은 것

myModel.on('change', function() {
  $.post("/my-url", ...);
});

백본과 같은 것을 볼 수 있습니다.

{{}}및 / 또는 ng-model 이있는 뷰 에서 Angular는 $watch()장면 뒤에서 사용자를 위해 설정합니다 .

기본적 $watch으로 참조로 비교합니다. 세 번째 매개 변수를 $watch로 설정하면 trueAngular는 대신 개체의 변경 사항을 "얕게"감시합니다. 배열의 경우 이것은 배열 항목을 비교하는 것을 의미하고, 객체 맵의 경우 속성을 감시하는 것을 의미합니다. 따라서 원하는 작업을 수행해야합니다.

$scope.$watch('myModel', function() { ... }, true);

업데이트 : Angular v1.2는 이에 대한 새로운 메소드 `$ watchCollection ()을 추가했습니다 :

$scope.$watchCollection('myModel', function() { ... });

참조를 따르지 않기 때문에 "얕은"이라는 단어가 비교를 설명하는 데 사용됩니다. 참조를 따르지 않기 때문입니다. 예를 들어 감시 된 객체에 다른 객체에 대한 참조 인 속성 값이 포함 된 경우 해당 참조는 비교를 위해 따르지 않습니다. 다른 개체.

상태 (수정 됨 / 수정되지 않음)에 따라 양식 요소의 스타일을 동적으로 지정하거나 일부 값이 실제로 변경되었는지 테스트하려면 다음 모듈을 사용할 수 있습니다. https://github.com/betsol / angular-input-modified

추가 속성과 메서드를 폼과 자식 요소에 추가합니다. 이를 통해 일부 요소에 새 데이터가 포함되어 있는지 테스트하거나 전체 양식에 저장되지 않은 새 데이터가 있는지 테스트 할 수도 있습니다.

다음 watch를 설정할 수 있습니다. $scope.$watch('myForm.modified', handler)일부 양식 요소에 실제로 새 데이터가 포함되거나 초기 상태로 반전 된 경우 핸들러가 호출됩니다.

또한 modified개별 양식 요소의 속성을 사용 하여 실제로 AJAX 호출을 통해 서버로 전송되는 데이터의 양을 줄일 수 있습니다. 변경되지 않은 데이터를 보낼 필요가 없습니다.

보너스로 양식의 reset()메소드 호출을 통해 양식을 초기 상태로 되돌릴 수 있습니다 .

모듈의 데모는 여기에서 찾을 수 있습니다. http://plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

건배!