버튼 클릭시 각도보기 모델 업데이트

각도 데이터 바인딩이 작동하는 방식을 이해하려고합니다. 나는 span 요소 내부 {{values.count}}을 표시이 샘플을 만들었습니다 버튼 클릭시 각도보기 모델 업데이트

<body ng-app="testApp" ng-controller="testCtrl as values"> 
    <span>Count = {{values.count}}</span> 
    <button id="incr">++</button> 
</body> 
<script> 
    testApp = angular.module("testApp", []); 
    testApp.controller("testCtrl", function() { 
     var values = this; 
     values.count = 5; 

     $("#incr").on('click', function() { 
      values.count += 1; 
     }); 
    }); 
</script>

나는 버튼을 클릭하면

이 values.count이 증가를하지만, span가 업데이트되지 않습니다. 버튼에 ng-click="values.Increment()"을 배치하고 컨트롤러에 values.Increment 메서드를 만들면 작동하도록 만들 수 있지만, 하나의 작업과 다른 작업의 차이점은 무엇입니까?

출처

2015-01-19 Neal S.

잘못하고 있습니다. 각도를 사용하는 경우이 목적으로 이벤트 핸들러를 바인딩하거나 DOM 요소에 액세스 할 필요가 없습니다. 내장 된 ng-click 지시문을 사용하십시오.

<button ng-click="values.incr()">++</button>

및

values.incr = function(){ 
    values.count++; 
}

심지어 인라인을 할 수있는, <button ng-click="values.count = values.count+1">++</button> 코드가 DOM을 업데이트하지 않은 이유는 방식 때문에 각 작품이다. 수동으로 바인드 된 이벤트 핸들러 안의 값을 증가 시키더라도 각도는 업데이트를 인식하지 못하며 DOM 바인딩을 새 값으로 업데이트하지 않습니다. 특정 상황에서의 나쁜 습관은 $scope.$apply() (물론 컨트롤러에 $scope을 주입해야 함)을 수행하여 이벤트 처리기에서 수동으로 다이제스트주기를 호출하는 것으로 달성 할 수 있습니다. 각도로 작업 할 때 일반적인 썸 규칙은 DOM에 직접 액세스하지 않고 뷰의 데이터를 설정하고 바인딩 및 기타 기본 제공 또는 사용자 지정 지정 문을 사용하여 응용 프로그램에서 의도 한 동작을 얻습니다.

Read about scope life cycle and digest cycle

출처

2015-01-19 03:51:34 PSL

그래서, 각도 행사에서 찾고 좀 더, 당신은 정의하지 않는 각도 이벤트를 처리하는 것이 일반적인 방법은 무엇입니까. 예를 들어, 오디오 요소에 대한 이벤트 (실제로 내가하려고하는 것 - 내 예제는 내 문제를 단순화하려는 시도였습니다)? –

@NealS. 이벤트를 사용할 수없는 경우 사용자 지정 지시문을 직접 작성하여 처리 할 수 있습니다. 예를 들어, [이 답변보기] (http://stackoverflow.com/questions/26147584/how-to-disable-ngtouch-conditionally-and-fallback-to-ng-click)에서 관리 할 사용자 지정 지시문을 만듭니다. 특정 이벤트. – PSL

또 다른 질문은 ... HTML 마크 업과 함께 컨트롤러에 호출을 믹싱하는 데 어떤 문제가 있습니까? 내 경향은 그런 것을 피하는 것이 었습니다. –

버튼 클릭시 각도보기 모델 업데이트

답변

관련 문제