AngularJS - 커스텀 디렉티브에서 ngModel 값을 변경하는 방법
제 지시사항을 살펴봅시다.
angular.module('main').directive('datepicker', [
function() {
return {
require: '?ngModel',
link: function(scope, element, attributes, ngModel) {
ngModel.$modelValue = 'abc'; // this does not work
// how do I change the value of the model?
그러면 ng-model 값은 어떻게 변경할 수 있을까요?
여기에는 다양한 방법이 있습니다.
$setViewValue()
뷰와 모델을 업데이트합니다.대부분의 경우 그걸로 충분합니다.- 모델에서 뷰의 연결을 끊는 경우(예: 모델은 숫자이지만 뷰는 수천 개의 구분자를 가진 문자열)에 직접 액세스할 수 있습니다.
$viewValue
그리고.$modelValue
- 다음 내용도 덮어쓰려면
ng-model
(예: 지시문은 소수점 수를 변경하고 모델도 업데이트), 주입ngModel: '='
촬영대와 촬영대에scope.ngModel
예.
return {
restrict: 'A',
require: 'ngModel',
scope: {
ngModel: '='
},
link: function (scope, element, attrs, ngModelCtrl) {
function updateView(value) {
ngModelCtrl.$viewValue = value;
ngModelCtrl.$render();
}
function updateModel(value) {
ngModelCtrl.$modelValue = value;
scope.ngModel = value; // overwrites ngModel value
}
...
링크:
- 첫 번째 옵션에 대해서는 이쪽에서 설명하겠습니다.
- NgModelController 공식 문서
복잡한 바인딩 표현식을 사용하려면 $parse 서비스와assign
방법.
자세한 내용은 ng-conf의 이 비디오를 참조하십시오.ng-model 디렉티브로 할 수 있는 멋진 일에 대한 모든 정보입니다.https://www.youtube.com/watch?v=jVzymluqmg4
app.directive('datepicker', ['$parse',
function($parse) {
return {
require: '?ngModel',
link: function(scope, element, attributes, controller) {
// $parse works out how to get the value.
// This returns a function that returns the result of your ng-model expression.
var modelGetter = $parse(attributes['ngModel']);
console.log(modelGetter(scope));
// This returns a function that lets us set the value of the ng-model binding expression:
var modelSetter = modelGetter.assign;
// This is how you can use it to set the value 'bar' on the given scope.
modelSetter(scope, 'bar');
console.log(modelGetter(scope));
}
};
}
]);
시도한 것은 실제로 효과가 있습니다.이 Plunker를 참조해 주세요.
모델을 이렇게 변경하는 것은 호출하지 않기 때문에 입력에 "표시"되지 않습니다.controller.$render()
새로운 것을 만들다controller.$viewValue
.
하지만 왜 간단히 바꿔놓지 않는거죠?$scope
값(모르지만 이상하지 않은 한):
angular.module('main').directive('datepicker', [function() {
return {
require: '?ngModel',
link: function(scope, element, attributes, controller) {
var model = attributes['ngModel'];
scope[model] = 'bar';
}
};
}]);
그리고 html:
<input ng-model="yourVariable" datepicker>
편집: (동적인 솔루션)
angular.module('main').directive('datepicker', [function() {
return {
require: '?ngModel',
link: function(scope, element, attributes, controller) {
// get the value of the `ng-model` attribute
var model = attributes['ngModel'];
// update the scope if model is defined
if (model) {
scope[model] = 'bar';
}
}
};
}]);
이 방법은DatePicker
내 사이트에서
link: function(scope, elem, attrs, ngModel) {
scope.$apply(function(){
ngModel.$viewValue = value;
}
}
여기 내가 접한 최고의 설명이 있다.이것은 나에게 큰 도움이 되었고, 여기에 있는 다른 많은 답변들의 세부사항을 정리했다.
힌트: 기사를 대충 읽는 것보다 전체 기사를 읽는 것을 주의하세요.그렇지 않으면 중요한 부분을 놓칠 수 있습니다.
https://www.nadeau.tv/post/using-ngmodelcontroller-with-custom-directives/
언급URL : https://stackoverflow.com/questions/22639485/angularjs-how-to-change-the-value-of-ngmodel-in-custom-directive
'programing' 카테고리의 다른 글
http post 요청의 요청 페이로드에 json 데이터를 전달하는 방법 (0) | 2023.03.12 |
---|---|
X-Sendfile 헤더가 작동하는지 테스트합니다. (0) | 2023.03.12 |
@TestPropertySource는 봄 1.2.6의 AnnotationConfigContextLoader를 사용한 JUnit 테스트에서 작동하지 않습니다. (0) | 2023.03.12 |
각도 JS: js 파일을 부분적으로 로드하는 방법 (0) | 2023.03.12 |
자동 추가 제거자동 추가 제거문자 그대로의 내용이 없는 페이지(숏 코드 사용)에서 (0) | 2023.03.12 |