Angle의 $watch 메소드에 대한 자세한 설명
- 黄舟원래의
- 2017-09-25 10:03:371609검색
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='张三';
$scope.count=0;
// 监听一个model 当一个model每次改变时 都会触发第2个函数
$scope.$watch('name',function(newValue,oldValue){
++$scope.count;
if($scope.count > 30){
$scope.name = '已经大于30次了';
}
});
}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번까지는 마음대로 수정할 수 있습니다.
30번 수정하면 이름이 고정됩니다. '30번 이상'인 경우:
시계의 역할이며, 모델이 바뀔 때마다 두 번째 기능이 실행됩니다.
(4) watch의 세 번째 매개변수
모니터링이 객체 또는 배열인 경우, 예:
$scope.data = {
name :'李四',
count:20
}이때 데이터의 이름과 개수를 모두 모니터링해야 한다면 다음과 같이 작성할 수 있습니다.
$scope.$watch('data',function(){
},true) 세 번째 매개변수를 추가하지 않으면 데이터만 모니터링되며, 데이터 참조가 변경될 때만 트리거됩니다.
따라서 일부 참조 객체를 모니터링해야 하는 경우 세 번째 매개변수를 true로 설정해야 합니다.
위 내용은 Angle의 $watch 메소드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!