2014-12-16 2 views
9

$scope 속성을 변경하면 무언가를하고 싶다고합시다. 이 속성은 input 필드에 바인딩되어 있습니다. $watch을 사용하는 경우와 ngChange을 사용하는 경우의 장점/단점은 무엇입니까?

HTML

<input ng-model="foo" ng-change="increment()"> 
<p>foo: {{foo}}</p> 

<!-- I want to do something when foo changes. 
    In this case keep track of the number of changes. --> 
<p>fooChangeCount: {{fooChangeCount}}</p> 

JS

// Option 1: $watch 
$scope.$watch('foo', function() { 
    $scope.fooChangeCount++; 
}); 

// Option 2: ngChange 
$scope.fooChangeCount = 0; 
$scope.increment = function() { 
    $scope.fooChangeCount++; 
}; 

http://plnkr.co/edit/4xJWpU6AN9HIp0OSZjgm?p=preview

당신이 $watch (값이 당신이 찾는 경우를 사용해야 할 때이 시간이 있다는 것을 이해 시계가 입력 필드에 바인딩되지 않음). 그리고 나는 여러분이 ngChange을 사용해야 할 때가 있다는 것을 이해합니다. (입력 값의 변화에 ​​응답하기 위해 무언가를하고 싶을 때, 그러나 스코프 속성 변경에 응답 할 필요는 없습니다).

그러나이 경우 모두 동일한 작업을 수행합니다.

내 생각 :

  • ngChange 청소기, 그리고 무슨 일이 일어나고 있는지 이해하기 쉽게 보인다.
  • $watch 다소 빨라지지만 무시할 수있을 것 같습니다. ngChange을 사용하면 Angular가 이벤트 리스너를 설정하기 위해 컴파일 단계에서 추가 작업을해야 할 것이라고 생각합니다. 아마도 추가 이벤트 리스너가 속도를 조금 줄입니다. ngChange을 사용하는지 여부에 관계없이 다이제스트주기가 변경 사항에 따라 실행되므로 변경 사항에 응답하여 무언가를 청취하고 함수를 호출 할 수 있습니다.

답변

11

결론 - ng-change로 달성 할 수있는 모든 것을 $ watch로 달성 할 수 있지만 그 반대는 성취 할 수 없습니다.

목적 :

ngChange -

$ 시계 HTML 요소에 바인더 제본 - 범위의 모델 객체를 관찰 엄지 손가락의

내 규칙 (HTML 개체 모델 포함) - ng-change를 사용하여 시나리오와 일치 시키면 $ watch

을 사용하십시오. 0

왜 $ watch를 사용하면 안됩니까?

  1. 그것은 비효율적 - 당신의 $에 복잡성을 추가 그것은 깨끗 아니다 효과적으로
  2. 을 테스트하기 어렵다
  3. 소화
0

$ watch는 $ digest를 복잡하게 만들어 덜 효율적입니다. 귀하의 경우 ngChange에서는이 깨끗하고 쉽게 솔루션입니다 ...

글꼴 : 당신은 그것을 대부분 권리가 http://www.benlesh.com/2013/10/title.html

0

. ng-change은 매우 DOM에만 해당하며 DOM 요소에서 change 이벤트가 발생하는 경우 표현식을 평가하는 데 사용됩니다.

$watch 그러나보기 모델 또는 $scope을 감시하는 하위 수준 (및보다 일반적인 용도) 유틸리티입니다. 따라서 시계 기능은 사용자가 키를 입력 할 때마다 실행됩니다 (입력 예에서).

대조적으로, 하나는 DOM 이벤트를 수신하고 다른 하나는 데이터를 감시합니다.