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

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>

내 시도는 이렇다.
http://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
});

이 특정 동작에 대한 설명은 제가 조금 전에 드린 답변을 보세요: "How does Angular?"JS는 내부적으로 '클릭', '변경'과 같은 이벤트를 포착합니다."

---

하지만 안타깝게도, 이 문제만이 아닙니다.다른 투고 댓글에서 지적했듯이 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;
    });
});

listener on action 버튼을 추가하여 컨트롤러 초기화만 수정했습니다.

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

한번은 아래 앵귤러 서비스를 사용하여 그렇게 했습니다.

$140

다음 getData 함수는 동일한 컨트롤러 범위에서 호출되며 원하는 값을 제공합니다.

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

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

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

했습니다.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);

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

'아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아onchange ★★★★★★★★★★★★★★★★★」ng-change로 태그

외부에서 vanilla/j로 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");

OP가 요청한 것이 아니라 입력 필드를 통해 필요한 세부 정보를 채우는 사용자 스크립트를 작성하는 것이 더 나을 수 있습니다.(완전하게) 효과가 있는 것은 아무것도 없었지만, 마침내 이 방법으로 해냈습니다.

var el = $('#sp_formfield_fw_ip');
el.val("some value");
angular.element(el).triggerHandler('focus');
angular.element(el).triggerHandler('input');
angular.element(el).triggerHandler('change');
angular.element(el).triggerHandler('blur');

도구를 합니다.input필드에 추가 이벤트를 입력합니다.거기서 (내 경우) 모든 것을 찾았습니다. focus,input,change ★★★★★★★★★★★★★★★★★」blur.

언급URL : https://stackoverflow.com/questions/17109850/update-angular-model-after-setting-input-value-with-jquery