AngularJS : jQuery로 변경 시 ng-model 바인딩이 업데이트되지 않음

AngularJS : jQuery로 변경 시 ng-model 바인딩이 업데이트되지 않음

이것은 나의 HTML 입니다.

<input id="selectedDueDate" type="text" ng-model="selectedDate" />

박스에 입력하면 쌍방향 바인딩 메커니즘으로 모델이 업데이트됩니다.달콤해.

근데 JQuery를 통해서 하면...

$('#selectedDueDate').val(dateText);

모델 업데이트는 안 돼요. 왜요?

앵글은 그 변화를 몰라이 건에 대해서는, 전화 주셔야 합니다.$scope.$digest()또는 내부 변경을 실시합니다.$scope.$apply():

$scope.$apply(function() { 
   // every changes goes here
   $('#selectedDueDate').val(dateText); 
});

더티 체크를 더 잘 이해하려면 여기를 참조하십시오.

업데이트: 다음은 예시입니다.

사용하기만 하면 됩니다.

$('#selectedDueDate').val(dateText).trigger('input');

변수를 직접 스코프에 배치하지 않으면 더 안정적으로 업데이트된다는 것을 알게 되었습니다.

dateObj를 사용해 보세요.selectedDate"와 컨트롤러에서 다음과 같이 selectedDate를 dateObj 객체에 추가합니다.

$scope.dateObj = {selectedDate: new Date()}

이건 나한테 효과가 있었어.

이거 드셔보세요

var selectedDueDateField = document.getElementById("selectedDueDate");
var element = angular.element(selectedDueDateField);
element.val('new value here');
element.triggerHandler('input');

기능 종료 시 다음 행을 실행합니다.

$125.$disc()

ng-model이 입력 이벤트를 수신하고 스코프가 업데이트되므로 입력 요소의 변경 이벤트를 트리거해야 합니다.그러나 일반 jQuery 트리거는 작동하지 않았습니다.하지만 여기 마법처럼 작동하는 것이 있다.

$("#myInput")[0].dispatchEvent(new Event("input", { bubbles: true })); //Works

팔로잉이 작동하지 않았다.

$("#myInput").trigger("change"); // Did't work for me

모의 이벤트 생성 및 디스패치에 대한 자세한 내용은 여기를 참조하십시오.

앵글의 범위 밖에서 무슨 일이 일어나든 앵글은 절대 모를 거야

다이제스트 사이클에서는 모델 ->컨트롤러에서 변경 후 컨트롤러 ->모델에서 변경을 추가합니다.

최신 모델을 보려면 다이제스트 사이클을 트리거해야 합니다.

그러나 다이제스트 사이클이 진행 중일 가능성이 있으므로 확인하고 사이클을 초기화해야 합니다.

가급적 항상 안전한 적용을 수행하십시오.

       $scope.safeApply = function(fn) {
            if (this.$root) {
                var phase = this.$root.$$phase;
                if (phase == '$apply' || phase == '$digest') {
                    if (fn && (typeof (fn) === 'function')) {
                        fn();
                    }
                } else {
                    this.$apply(fn);
                }
            }
        };


      $scope.safeApply(function(){
          // your function here.
      });

AngularJS는 문자열, 숫자 및 부호를 값으로 전달하고 어레이 및 개체를 참조로 전달합니다.따라서 빈 개체를 만들고 날짜를 해당 개체의 속성으로 만들 수 있습니다.이러한 방식으로 각도가 모델 변화를 감지합니다.

인컨트롤러

app.module('yourModule').controller('yourController',function($scope){
$scope.vm={selectedDate:''}
});

html에서

<div ng-controller="yourController">
<input id="selectedDueDate" type="text" ng-model="vm.selectedDate" />
</div>

사용방법:

$('#selectedDueDate').val(dateText).trigger('input');

다음 대신:

$('#selectedDueDate').val(dateText);

jQuery용 작은 플러그인을 작성했습니다.이 플러그인은 모든 콜을 다음 주소로 전송합니다..val(value)각도 요소가 있는 경우 다음과 같이 업데이트합니다.

(function($, ng) {
  'use strict';

  var $val = $.fn.val; // save original jQuery function

  // override jQuery function
  $.fn.val = function (value) {
    // if getter, just return original
    if (!arguments.length) {
      return $val.call(this);
    }

    // get result of original function
    var result = $val.call(this, value);

    // trigger angular input (this[0] is the DOM object)
    ng.element(this[0]).triggerHandler('input');

    // return the original result
    return result; 
  }
})(window.jQuery, window.angular);

jQuery와 angular.js 뒤에 이 스크립트를 팝업합니다.val(value)업데이트가 재생됩니다.

---

최소 버전:

!function(n,t){"use strict";var r=n.fn.val;n.fn.val=function(n){if(!arguments.length)return r.call(this);var e=r.call(this,n);return t.element(this[0]).triggerHandler("input"),e}}(window.jQuery,window.angular);

---

예:

// the function
(function($, ng) {
  'use strict';
  
  var $val = $.fn.val;
  
  $.fn.val = function (value) {
    if (!arguments.length) {
      return $val.call(this);
    }
    
    var result = $val.call(this, value);
    
    ng.element(this[0]).triggerHandler('input');
    
    return result;
    
  }
})(window.jQuery, window.angular);

(function(ng){ 
  ng.module('example', [])
    .controller('ExampleController', function($scope) {
      $scope.output = "output";
      
      $scope.change = function() {
        $scope.output = "" + $scope.input;
      }
    });
})(window.angular);

(function($){  
  $(function() {
    var button = $('#button');
  
    if (button.length)
      console.log('hello, button');
    
    button.click(function() {
      var input = $('#input');
      
      var value = parseInt(input.val());
      value = isNaN(value) ? 0 : value;
      
      input.val(value + 1);
    });
  });
})(window.jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="example" ng-controller="ExampleController">
  <input type="number" id="input" ng-model="input" ng-change="change()" />
  <span>{{output}}</span>
  <button id="button">+</button>
</div>

---

이 답변은 다른 유사한 질문에 대한 나의 답변에서 그대로 베낀 것이다.

언급URL : https://stackoverflow.com/questions/11873627/angularjs-ng-model-binding-not-updating-when-changed-with-jquery