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

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

一个新手

풀어 주다： 2017-10-06 10:40:07

원래의

2108명이 탐색했습니다.

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 : 모니터링되는 개체의 각 속성이 변경되었는지 확인하는 선택적 부울 명령입니다.

$watch는 함수를 반환합니다. 이 watch를 등록 취소하려면

(3) 예제

이전 예제에서 , 이름의 형태가 30번 변경되면 이벤트가 발생합니다.

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

var firstController = function ($scope){
    $scope.n
ame=&#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>
    <p ng-app="">
 
        <p ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
 
            改变次数:{{count}}-{{name}}
        </p>
    </p>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

로그인 후 복사

런닝중 효과는 다음과 같습니다.

Top 30 시간은 마음대로 수정 가능:

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

30번 수정 시 이름은 '30번보다 컸습니다'로 고정:

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

이 역할은 다음과 같습니다. 시계 모델이 변경될 때마다 두 번째 기능이 실행됩니다.

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

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

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

로그인 후 복사

이때 데이터에 포함된 이름과 개수를 반드시 모니터링해야 하므로 다음과 같이 작성하시면 됩니다.

1
2
3

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

로그인 후 복사

세 번째 매개변수를 추가한 다음 데이터 참조가 변경될 때만 트리거되는 모니터 데이터만 추가합니다.

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

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