jquery - jQueryで入力値を設定した後にAngularモデルを更新する

Question

私はこの簡単なシナリオを持っています:

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/

誰かが私を正しい方向に向けることができますか?

Answer 1

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

この特定の動作の説明については、私が少し前に行った次の回答を参照してください。

---

しかし、残念ながら、これはあなただけの問題ではありません。他の投稿コメントで指摘されているように、jQuery 中心のアプローチは明らかに間違っています。詳細については、次の投稿をご覧ください: jQuery のバックグラウンドがある場合、「AngularJS で考える」にはどうすればよいですか? ）。

Answer 2

これが誰かに役立つことを願っています。

jQuery('#myInputElement').trigger('input')Angular アプリでイベントを取得できませんでした。

しかし、私は迎えに行くことができangular.element(jQuery('#myInputElement')).triggerHandler('input')ました。

Answer 3

jQueryでイベントをトリガーしていた受け入れられた答えはinput、私にとってはうまくいきませんでした。イベントを作成し、ネイティブ JavaScript でディスパッチすることでうまくいきました。

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

Answer 4

ここでは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);
});

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

Answer 6

私は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>

Answer 7

.change()値を設定した後に追加します。

例：('id').val.('value').change();

onchangeまた、htmlに追加またはng-changeタグ付けすることを忘れないでください

Answer 8

IE を使用している場合は、input.trigger("change"); を使用する必要があります。