jQuery로 입력 값을 설정 한 후 각도 모델 업데이트

이 간단한 시나리오가 있습니다.

jQuery의 val () 메소드에 의해 값이 변경되는 입력 요소.

jQuery가 설정 한 값으로 각도 모델을 업데이트하려고합니다. 간단한 지시문을 작성하려고했지만 원하는 것을하지 않습니다.

지시어는 다음과 같습니다.

var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
    return function(scope, element, attrs) {        
        element.bind('change', function() {
            console.log('value changed');
        })
    }
})

이것은 jQuery 부분입니다.

$(function(){
    $('button').click(function(){
        $('input').val('xxx');
    })
})

그리고 html :

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input test-change ng-model="foo" />
        <span>{{foo}}</span>
    </div>
</div>

<button>clickme</button>

내 시도와 바이올린은 다음과 같습니다.
//jsfiddle.net/U3pVM/743/

누군가 올바른 방향으로 나를 가리킬 수 있습니까?

ngModel은 "입력"이벤트를 수신하므로 코드를 "수정"하려면 값을 설정 한 후 해당 이벤트를 트리거해야합니다.

$('button').click(function(){
    var input = $('input');
    input.val('xxx');
    input.trigger('input'); // Use for Chrome/Firefox/Edge
    input.trigger('change'); // Use for Chrome/Firefox/Edge + IE11
});

이 특정 동작에 대한 설명은 " AnularJS가 내부적으로 'onclick', 'onchange'와 같은 이벤트를 어떻게 포착합니까? "라는 답변을 확인하십시오.

그러나 불행히도 이것이 당신이 가진 유일한 문제는 아닙니다. 다른 게시물 주석에서 지적했듯이 jQuery 중심 접근 방식은 명백히 잘못되었습니다. 자세한 내용은이 게시물을 살펴보십시오 . jQuery 배경이있는 경우 어떻게“AngularJS를 생각합니까?” ).

이것이 누군가에게 유용하기를 바랍니다.

나는 얻을 수 없었다 jQuery('#myInputElement').trigger('input')각도 앱 이벤트 습니다.

그러나 나는 angular.element(jQuery('#myInputElement')).triggerHandler('input')데리러 올 수 있었다 .

inputjQuery로 이벤트를 트리거 한 수락 된 답변이 효과가 없었습니다. 이벤트를 작성하고 기본 JavaScript로 디스패치하는 것이 트릭입니다.

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

jQuery가 필요하다고 생각하지 않습니다.

대신 $ watch 와 ng-click을 사용할 수 있습니다

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input test-change ng-model="foo" />
    <span>{{foo}}</span>

    <button ng-click=" foo= 'xxx' ">click me</button>
    <!-- this changes foo value, you can also call a function from your controller -->
  </div>
</div>

컨트롤러에서 :

$scope.$watch('foo', function(newValue, oldValue) {
  console.log(newValue);
  console.log(oldValue);
});

다음과 같이 특정 입력 모델의 범위를 업데이트하려면 다음 코드를 사용해야합니다

$('button').on('click', function(){
    var newVal = $(this).data('val');
    $('select').val(newVal).change();

    var scope = angular.element($("select")).scope();
    scope.$apply(function(){
        scope.selectValue = newVal;
    });
});

액션 버튼에 리스너를 추가하여 컨트롤러 초기화 만 수정했습니다.

$(document).on('click', '#action-button', function () {
        $timeout(function () {
             angular.element($('#input')).triggerHandler('input');
        });
});

내 경우에는 다른 솔루션이 작동하지 않았습니다.

나는 여기에 대답하는 것이 약간 늦다는 것을 알고 있지만 어쩌면 나는 하루를 한 번 구할 수도 있습니다.

나는 같은 문제를 다루고있다. jQuery에서 입력 값을 업데이트하면 모델이 채워지지 않습니다. 트리거 이벤트를 사용해 보았지만 결과가 없습니다.

내가 한 일이 당신의 하루를 구할 수 있습니다.

HTML에서 스크립트 태그 내에 변수를 선언하십시오.

처럼:

<script>
 var inputValue="";

// update that variable using your jQuery function with appropriate value, you want...

</script>

일단 아래의 각도 서비스를 사용하여 그렇게했습니다.

창

이제 동일한 컨트롤러 범위에서 호출 된 getData 함수 아래에 원하는 값이 제공됩니다.

var myApp = angular.module('myApp', []);

app.controller('imageManagerCtrl',['$scope','$window',function($scope,$window) {

$scope.getData = function () {
    console.log("Window value " + $window.inputValue);
}}]);

나는 .val(value)각도 요소 를 업데이트 하기 위해 모든 호출을 할 jQuery 용이 작은 플러그인을 작성했다 .

(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>

IE를 사용하는 경우 다음을 사용해야합니다. input.trigger ( "change");

.change()값을 설정 한 후 추가하십시오 .

예:('id').val.('value').change();

또한 HTML에 태그 를 추가 onchange하거나 추가하는 것을 잊지 마십시오ng-change

Vanilla / jQuery를 사용하여 외부에서 ngModel의 값을 업데이트 할 수 있도록이 작업을 수행했습니다.

function getScope(fieldElement) {
    var $scope = angular.element(fieldElement).scope();
    var nameScope;
    var name = fieldElement.getAttribute('name');
    if($scope) {
        if($scope.form) {
            nameScope = $scope.form[name];
        } else if($scope[name]) {
            nameScope = $scope[name];
        }
    }
    return nameScope;
}

function setScopeValue(fieldElement, newValue) {
    var $scope = getScope(fieldElement);
    if($scope) {
        $scope.$setViewValue(newValue);
        $scope.$validate();
        $scope.$render();
    }
}

setScopeValue(document.getElementById("fieldId"), "new value");