각도의 다중 변수 변화를 $watch하는 방법
방법$scope.$watch여러 변수를 Angular로 설정하고 그 중 하나가 변경되었을 때 콜백을 트리거합니다.
$scope.name = ...
$scope.age = ...
$scope.$watch('???',function(){
//called when name or age changed
})
갱신하다
Angular는 이제 $watchGroup(1.3 이후)과 $watchCollection의 두 가지 스코프 메서드를 제공합니다.그것들은 @blazemonger와 @kargold에 의해 언급되었다.
이는 유형 및 값에 관계없이 작동해야 합니다.
$scope.$watch('[age,name]', function () { ... }, true);
이 경우 세 번째 파라미터를 true로 설정해야 합니다.
문자열 연결'age + name'는 다음과 같은 경우에 실패합니다.
<button ng-init="age=42;name='foo'" ng-click="age=4;name='2foo'">click</button>
사용자가 버튼을 클릭하기 전에 감시된 값은42foo(42+foo) 및 클릭 후42foo(4+2foo따라서 워치 기능은 호출되지 않습니다.따라서 이러한 경우가 발생하지 않도록 어레이 식을 사용하는 것이 좋습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-mocks.js"></script>
<script>
angular.module('demo', []).controller('MainCtrl', function ($scope) {
$scope.firstWatchFunctionCounter = 0;
$scope.secondWatchFunctionCounter = 0;
$scope.$watch('[age, name]', function () { $scope.firstWatchFunctionCounter++; }, true);
$scope.$watch('age + name', function () { $scope.secondWatchFunctionCounter++; });
});
describe('Demo module', function () {
beforeEach(module('demo'));
describe('MainCtrl', function () {
it('watch function should increment a counter', inject(function ($controller, $rootScope) {
var scope = $rootScope.$new();
scope.age = 42;
scope.name = 'foo';
var ctrl = $controller('MainCtrl', { '$scope': scope });
scope.$digest();
expect(scope.firstWatchFunctionCounter).toBe(1);
expect(scope.secondWatchFunctionCounter).toBe(1);
scope.age = 4;
scope.name = '2foo';
scope.$digest();
expect(scope.firstWatchFunctionCounter).toBe(2);
expect(scope.secondWatchFunctionCounter).toBe(2); // This will fail!
}));
});
});
(function () {
var jasmineEnv = jasmine.getEnv();
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body></body>
</html>
http://plnkr.co/edit/2DwCOftQTltWFbEDiDlA?p=preview
PS:
@reblace가 코멘트에서 설명한 바와 같이 당연히 다음 값에 액세스할 수 있습니다.
$scope.$watch('[age,name]', function (newValue, oldValue) {
var newAge = newValue[0];
var newName = newValue[1];
var oldAge = oldValue[0];
var oldName = oldValue[1];
}, true);
$scope.$watch('age + name', function () {
//called when name or age changed
});
Angular 1.3은 이 목적을 위해 특별히 $watch Group을 제공합니다.
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchGroup
이것은 일련의 식에서 표준 $watch와 같은 궁극적인 결과를 제공하는 것 같습니다.나는 그것이 코드의 의도를 명확하게 하기 때문에 좋아한다.
아무도 당연한 것에 대해 언급하지 않았다.
var myCallback = function() { console.log("name or age changed"); };
$scope.$watch("name", myCallback);
$scope.$watch("age", myCallback);
이것은, 폴링이 조금 적은 것을 의미할 가능성이 있습니다.둘 다 보면name + age(이를 위해) 및name(elsewhere) 그럼 앵글이 효과적으로 볼 것 같은데name두 번이나 더러움을 느꼈어요.
콜백을 인라인으로 표시하는 대신 이름으로 사용하는 것이 더 읽기 쉽다고 말할 수 있습니다.특히 내 예보다 더 좋은 이름을 붙일 수 있다면.
또한 다음과 같은 경우 다양한 방법으로 값을 확인할 수 있습니다.
$scope.$watch("buyers", myCallback, true);
$scope.$watchCollection("sellers", myCallback);
$watchGroup사용할 수 있다면 좋겠지만, 제가 보기에는 그룹 멤버들을 컬렉션으로 볼 수도 없고 오브젝트 평등하게 볼 수도 없습니다.
1개의 콜백 함수 호출에 포함된 두 식 모두 오래된 값과 새로운 값이 필요한 경우 다른 제안 솔루션 중 몇 가지가 더 편리할 수 있습니다.
여러 값을 감시하는 방법은 여러 가지가 있습니다.
//angular 1.1.4
$scope.$watchCollection(['foo', 'bar'], function(newValues, oldValues){
// do what you want here
});
최신 버전 이상
//angular 1.3
$scope.$watchGroup(['foo', 'bar'], function(newValues, oldValues, scope) {
//do what you want here
});
언급URL : https://stackoverflow.com/questions/16729965/how-to-watch-multiple-variable-change-in-angular
'programing' 카테고리의 다른 글
| ReferenceError: 모듈이 정의되지 않음 - 각/라벨 앱을 사용한 카르마/재스민 구성 (0) | 2023.04.05 |
|---|---|
| 대응: 할당 또는 함수 호출이 예상되고 대신 식이 표시됨 (0) | 2023.03.31 |
| 제품 페이지에 woocommerce 추가 버튼 추가 (0) | 2023.03.31 |
| cx_Oracle:결과 세트를 반복하려면 어떻게 해야 합니까? (0) | 2023.03.31 |
| Json의 getString()과 optString()의 차이점 (0) | 2023.03.31 |