AngularJS - 커스텀 디렉티브에서 ngModel 값을 변경하는 방법

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 값은 어떻게 변경할 수 있을까요?

여기에는 다양한 방법이 있습니다.

1. $setViewValue()뷰와 모델을 업데이트합니다.대부분의 경우 그걸로 충분합니다.
2. 모델에서 뷰의 연결을 끊는 경우(예: 모델은 숫자이지만 뷰는 수천 개의 구분자를 가진 문자열)에 직접 액세스할 수 있습니다.$viewValue그리고.$modelValue
3. 다음 내용도 덮어쓰려면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