AngularJS $watch

mirinae.maru 0 Comments

참고(구글번역)
– Understanding $watch(), $watchgroup() and $watchCollection() methods of scope
(http://www.dotnettricks.com/learn/angularjs/understanding-watch-watchgroup-and-watchcollection-methods-of-scope)
 
 
 

■ Angular는 $scope에서 모델 변경을 관찰하기 위해 $ watch API를 사용합니다. $scope에있는 각 변수의 관찰자는 값의 변화를 관찰합니다. $scope의 변수 값이 변경되면 뷰는 자동으로 업데이트됩니다. $ watch API는 모델 변경 사항을 스코프에서 관찰하는 방법으로 $watch, $watchGroup, $watchCollection가 있다.
 
 
 

■ $watch
이 함수는 $ scope에있는 변수의 변경을 관찰하는 데 사용됩니다. watchExpression, listener및 objectEquality의 세 가지 매개 변수를 사용합니다. 여기서 listener 및 objectEquality는 선택 매개 변수입니다.(listener는 변경전/후 값을 매개변수로 가지는 함수)
$watch(watchExpression, listener, [objectEquality])
여기에서 watchExpression은 $scope 범위의 표현식입니다. 이 표현식은 $ digest ()를 호출 할 때마다 호출되며 감시되는 값을 반환합니다. 리스너는 watchExpression의 값이 새 값으로 변경 될 때 호출되는 함수를 정의합니다. watchExpression이 변경되지 않으면 리스너가 호출되지 않습니다.
objectEquality는 참조 equality를 비교하는 대신 angular.equals를 사용하여 객체가 동일한 지 비교하는 데 사용되는 boolean type입니다.

<script>
scope.name = 'shailendra';
scope.counter = 0;

scope.$watch('name', function (newVal, oldVal) {
  scope.counter = scope.counter + 1;
});
</script>

 
 
 

■ $watch 예제

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script src='/js/jquery/jquery-1.11.0.min.js'></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myAppCtrl", function($scope){

       $scope.count = 0;

       $scope.countWatch = function() {
              $scope.count = $scope.count + 1;
       }

    $scope.$watch('count', function(newVal, oldVal) {
       console.log( "newVal : " + newVal + "\toldVal : " + oldVal );
       $("#log").text( $scope.count );
    });

});
</script>
</head>
<body ng-controller="myAppCtrl">
       <h1>
              AngularJS $watch<br/>
              <font color="red"></font>
       </h1>
       <button ng-click="countWatch()">$watch 테스트(count+1)</button>
       <hr/>
       Count : <div id="log"></div>
</body>
</html>

 
 
 

■ $watch 예제 실행 결과

 
 
 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다