[JQUERY] jQuery로 설정 입력 값 이후 업데이트 각도 모델

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

해결법

1. ---

   1.ngModel 그래서 "수정"코드는 트리거 필요할 것으로, "입력"이벤트를 수신하는 값을 설정 한 후 이벤트 :

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

   내가 준이 답변 밖으로이 특정 행동 검사의 설명을위한 전 동안 "AngularJS와는 내부적으로 '온 클릭', 'onchange를'같은 이벤트를 잡을 않습니다 어떻게?"

   그러나 불행하게도, 이것은 당신이 가지고있는 유일한 문제가되지 않습니다. 다른 게시물에 댓글로 지적 OUT으로, 당신의 jQuery를 중심 접근 방식은 명백히 잘못이다. 더 많은 정보를 위해이 게시물을 살펴 걸릴 : 나는 jQuery를 배경 만약 내가 "AngularJS와 생각"어떻게 참조).

2. ---

   2.이 사람에 유용 바랍니다.

   이 사람에 유용 바랍니다.

   나는 내 각 응용 프로그램을 포착 할 수있는 jQuery를 ( '# myInputElement'). 트리거 ( '입력') 이벤트를 얻을 수 없습니다.

   나는, 그러나 angular.element을 얻을 수 있었다 ((jQuery를 '# myInputElement')). triggerHandler ( '입력')을 포착 할 수 있습니다.

3. ---

   3.jQuery를 함께 입력 이벤트를 트리거 된 허용 대답은 나를 위해 작동하지 않았다. 이벤트 만들기 및 기본 자바 스크립트 파견 트릭을했다.

   jQuery를 함께 입력 이벤트를 트리거 된 허용 대답은 나를 위해 작동하지 않았다. 이벤트 만들기 및 기본 자바 스크립트 파견 트릭을했다.

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

4. ---

   4.내가 jQuery를 여기에 필요합니다 생각하지 않습니다.

   내가 jQuery를 여기에 필요합니다 생각하지 않습니다.

   당신은 $ 시계와 사용할 수있는 대신 NG를 클릭

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

5. ---

   5.다음과 같이 특정 입력 모델의 범위를 업데이트하기 위해 다음 코드를 사용할 필요가

   다음과 같이 특정 입력 모델의 범위를 업데이트하기 위해 다음 코드를 사용할 필요가

   $('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;
       });
   });
   

6. ---

   6.I는 동작 버튼에 대한 수신기를 추가함으로써 만 초기화 제어부에 수정했다 :

   I는 동작 버튼에 대한 수신기를 추가함으로써 만 초기화 제어부에 수정했다 :

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

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

7. ---

   7.나는 늦게 여기에 대답하지만, 어쩌면 내가 몇 번의 날을 절약 할 수 있습니다 조금 알고있다.

   나는 늦게 여기에 대답하지만, 어쩌면 내가 몇 번의 날을 절약 할 수 있습니다 조금 알고있다.

   저도 같은 문제를 다루고있다. 당신이 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);
   }}]);
   

8. ---

   8.나는 .val (값)에 대한 모든 통화를 할 수있는 경우 각 요소를 업데이트합니다 jQuery를위한이 작은 플러그인을 작성했습니다 :

   나는 .val (값)에 대한 모든 통화를 할 수있는 경우 각 요소를 업데이트합니다 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 (값) 이후에이 스크립트를 팝업.

   축소 된 버전 :

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

   예:

   // 함수 (함수 ($, NG) { '엄격한 사용'; VAR $ 발 = $ .fn.val; $ .fn.val = 함수 (값) { 만약 (!의에서 arguments.length) { $ val.call (이) 반환; } VAR 결과 = $ val.call (이, 값); ng.element (이 [0]) triggerHandler ( '입력.'); 결과를 반환; } }) (window.jQuery, window.angular); (함수 (NG) { ng.module ( '예'[]) .controller ( 'ExampleController'기능 ($ 범위) { $ scope.output = "출력"; $ scope.change = 함수 () { $ scope.output = ""+ $ scope.input; } }); }) (window.angular); (함수 ($) { () {(기능 $ VAR 버튼을 $ ( '# 버튼을') =; 경우 (button.length) CONSOLE.LOG ( '안녕하세요 버튼'); button.click (함수 () { VAR의 입력 값은 $ ( '# 입력') =; VAR 값으로 parseInt을 = (input.val ()); 때는 isNaN 값 = (값)? 0 값; input.val (값 + 1); }); }); }) (window.jQuery); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   출력 {{}} <버튼 ID = "버튼"> +

9. ---

   9.당신이 IE를 사용하는 경우, 당신은 사용해야합니다 : input.trigger ( "변화");

   당신이 IE를 사용하는 경우, 당신은 사용해야합니다 : input.trigger ( "변화");

10. ---

    10.값을 설정 한 후 () .change 추가.

    값을 설정 한 후 () .change 추가.

    예 :( 'ID') 발 ( '값')의 변화 ()...;

    또한 HTML에서 onchange를 또는 겨 변화 태그를 추가하는 것을 잊지 마세요

11. ---

    11.나는 이것이 바닐라 / jQuery로 외부에서 ngModel의 값을 업데이트 할 수 있도록했다 :

    나는 이것이 바닐라 / 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");
    

12. ---

    12.아니 영업 이익은 무엇을 요구하지만,뿐만 아니라 입력 필드를 통과하고 필요한 세부 사항을 채우고 userscript를 기록 할 수있는 영혼. 아무것도 (완전)는이 방법을 끝내야 관리 마지막 날 위해 일했습니다,하지만 :

    아니 영업 이익은 무엇을 요구하지만,뿐만 아니라 입력 필드를 통과하고 필요한 세부 사항을 채우고 userscript를 기록 할 수있는 영혼. 아무것도 (완전)는이 방법을 끝내야 관리 마지막 날 위해 일했습니다,하지만 :

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

    열기 개발자 도구 및 추가 이벤트에 대한 입력 필드를 검사합니다. 나는 (내 경우) 모두를이 발견 : 초점, 입력, 변경 및 흐림.

from https://stackoverflow.com/questions/17109850/update-angular-model-after-setting-input-value-with-jquery by cc-by-sa and MIT license