각도의 $watch 메소드에 대한 자세한 설명
- 一个新手원래의
- 2017-10-06 10:40:072102검색
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번 변경되면 이벤트가 발생합니다.
컨트롤러 코드는 다음과 같습니다.
|
1 2 3 4 5 6 7 8 9 1 0 11 12 13 14 15 16 |
var firstController = function ($scope){
$scope.n
ame='张三';
$scope.count=0;
// 监听一个model 当一个model每次改变时 都会触发第2个函数
$scope.$watch('name',function(newValue,oldValue){
++$scope.count;
if($scope.count > 30){
$scope.name = '已经大于30次了';
}
});
} |
html 코드는 다음과 같습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 8 |
<!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 시간은 마음대로 수정 가능:
30번 수정 시 이름은 '30번보다 컸습니다'로 고정:
이 역할은 다음과 같습니다. 시계 모델이 변경될 때마다 두 번째 기능이 실행됩니다.
(4) watch의 세 번째 매개변수
모니터링되는 객체가 객체 또는 배열인 경우, 예:
|
1 2 3 4 |
$scope.data = {
name :'李四',
count:20
} |
이때 데이터에 포함된 이름과 개수를 반드시 모니터링해야 하므로 다음과 같이 작성하시면 됩니다.
|
1 2 3 |
$scope.$watch('data',function(){
},true) |
세 번째 매개변수를 추가한 다음 데이터 참조가 변경될 때만 트리거되는 모니터 데이터만 추가합니다.
따라서 일부 참조 객체를 모니터링해야 하는 경우 세 번째 매개변수를 true로 설정해야 합니다.
위 내용은 각도의 $watch 메소드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!