Angle의 $watch 메소드에 대한 자세한 설명-JS 튜토리얼-php.cn

Angle의 $watch 메소드에 대한 자세한 설명

黄舟

풀어 주다： 2017-09-25 10:03:37

원래의

1607명이 탐색했습니다.

Dirty check는 $apply 메소드에 언급되어 있습니다. 먼저 Apply 메소드가 evel 메소드를 트리거하고, 다이제스트 메소드가 watch 메소드를 트리거합니다.

(1) $watch 소개

digest가 실행될 때 watch에서 관찰한 값이 마지막 실행과 다를 경우 트리거됩니다.

AngularJS 내부의 watch를 사용하면 모델에 맞춰 페이지를 업데이트할 수 있습니다.

$watch 메소드는 주로 객체를 수동으로 모니터링하는 데 사용되지만 객체가 변경되면 이벤트가 트리거됩니다.

(2) watch 메소드 사용법

$watch(watchFn,watchAction,deepWatch)

로그인 후 복사

watchFn: 각도 표현식 또는 함수의 문자열

watchAction(newValue, oldValue,scope): watchFn이 변경되면 호출됩니다.

deepWatch: 선택적 Boolean 명령 확인은 각 속성이 모니터링 대상이 변경되었습니다

$watch가 함수를 반환합니다. 이 시계를 로그아웃하려면 함수를 사용할 수 있습니다.

(3) 예제

이전 예제에서 이름 형식이 30번 변경되면 이벤트를 트리거합니다.

컨트롤러 코드는 다음과 같습니다.

var firstController = function ($scope){
    $scope.name=&#39;张三&#39;;
    
    $scope.count=0;
    
    // 监听一个model 当一个model每次改变时 都会触发第2个函数
    $scope.$watch(&#39;name&#39;,function(newValue,oldValue){
 
        ++$scope.count;
 
        if($scope.count > 30){
            $scope.name = &#39;已经大于30次了&#39;;
        }
    });
 
}

로그인 후 복사

html 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div ng-app="">
 
        <div ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
 
            改变次数:{{count}}-{{name}}
        </div>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

로그인 후 복사

실행 효과는 다음과 같습니다.

처음 30번까지는 마음대로 수정할 수 있습니다.

Angle의 $watch 메소드에 대한 자세한 설명

30번 수정하면 이름이 고정됩니다. '30번 이상'인 경우:

Angle의 $watch 메소드에 대한 자세한 설명

시계의 역할이며, 모델이 바뀔 때마다 두 번째 기능이 실행됩니다.

(4) watch의 세 번째 매개변수

모니터링이 객체 또는 배열인 경우, 예:

 $scope.data = {
        name :&#39;李四&#39;,
        count:20
    }

로그인 후 복사

이때 데이터의 이름과 개수를 모두 모니터링해야 한다면 다음과 같이 작성할 수 있습니다.

 $scope.$watch(&#39;data&#39;,function(){
 
    },true)

로그인 후 복사

세 번째 매개변수를 추가하지 않으면 데이터만 모니터링되며, 데이터 참조가 변경될 때만 트리거됩니다.

따라서 일부 참조 객체를 모니터링해야 하는 경우 세 번째 매개변수를 true로 설정해야 합니다.

위 내용은 Angle의 $watch 메소드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!