내부 지시어에서 컨트롤러 모델 값 보기
저는 각진 시청을 하려고 합니다.$viewValue
명령어 내부의 컨트롤러에 대한 정보를 제공할 수 있습니다.
fiddle: http://jsfiddle.net/dkrotts/TfTr5/5/
function foo($scope, $timeout) {
$scope.bar = "Lorem ipsum";
$timeout(function() {
$scope.bar = "Dolor sit amet";
}, 2000);
}
myApp.directive('myDirective', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, controller) {
scope.$watch(controller.$viewValue, function() {
console.log("Changed to " + controller.$viewValue);
});
}
}
});
$watch 기능은 컨트롤러 내부에서 2초 후에 수행된 모델 변경을 포착하지 못합니다.제가 무엇을 빠뜨리고 있나요?
$watch
범위 내에서 감시할 속성의 "이름"을 승인합니다. 값을 감시하도록 요청하는 것입니다.보기로 바꿉니다.attrs.ngModel
'바'를 돌려주는 거지scope.bar
. 기존과 동일한 값을 얻거나 사용할 수 있습니다.scope[attrs.ngModel]
그것은 말하는 것과 같습니다.scope["bar"]
다시 말하지만, 다음과 같습니다.scope.bar
.
scope.$watch(attrs.ngModel, function(newValue) {
console.log("Changed to " + newValue);
});
사용자 271996의 의견을 명확히 하기 위해:scope.$eval
객체 표기법을 전달할 수 있기 때문에 사용됩니다.ng-model
속성, 즉 속성.ng-model="someObj.someProperty"
그게 안 될 거야 왜냐면scope["someObj.someProperty"]
유효하지 않습니다.scope.$eval
해당 문자열을 실제 개체로 평가하는 데 사용됩니다.scope["someObj.someProperty"]
된다scope.someObj.someProperty
.
추가하고 싶었습니다: 1.2.x에서는 격리된 범위에서 위의 내용이 작동하지 않습니다.http://jsfiddle.net/TfTr5/23/
제가 생각해낸 해결책은 $watch도 기능을 사용할 수 있기 때문에 그것을 사용하여 컨트롤러에 액세스할 수 있다는 것이었습니다.
scope.$watch(
function(){return controller.$viewValue},
function(newVal, oldVal){
//code
}
)
작업 fiddle: http://jsfiddle.net/TfTr5/24/
다른 대안이 있다면 기꺼이 환영하겠습니다!
격리된 범위 내의 값을 바인딩하려면 두 가지 방법이 있습니다.격리된 범위가 없어도 사용할 수 있는 첫 번째 방법.방법은 다음과 같습니다.
1) 쓰임새$attrs.any_attribute
(시계에 맞춰) 묶습니다.
2) 2 ways binding ('=') 메서드를 사용하여 리스너로 설정합니다.
예를 들어 더 많은 것을 원한다면 여기 멋진 기사가 있습니다.
모형 값에 대한 디바운스를 원할 경우 ng-model-option에서 디바운스 설정을 언급할 필요가 있습니다.
<input type="text" ng-model-options="{ debounce: 1000 }" ng-model="search"/>
예를 들어, 이 시계는 변경 후 1000ms 트리거되며 새로운 변경 시 재설정됩니다.
scope.$watch(attrs.ngModel, function(newValue) { });
https://docs.angularjs.org/api/ng/directive/ngModelOptions
언급URL : https://stackoverflow.com/questions/14567908/watch-controller-model-value-from-inside-directive
'programing' 카테고리의 다른 글
WooCommerce에서 재고 이메일 알림 수신자 변경 (0) | 2023.10.09 |
---|---|
이미지를 localStorage에 저장하고 다음 페이지에 표시하는 방법은 무엇입니까? (0) | 2023.10.09 |
CLion을 사용하여 포크된 자식 프로세스를 디버그하는 방법 (0) | 2023.10.09 |
Java에서 MySQL 저장 프로시저를 실행할 수 없습니다. (0) | 2023.10.09 |
포함 범위에서 임의 부동 소수점 두 배 (0) | 2023.10.09 |