103

これは私のHTMLです：

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

ボックスに入力すると、双方向バインディング メカニズムを介してモデルが更新されます。甘い。

ただし、JQuery経由でこれを行うと...

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

モデルを更新しません。なんで？

4

10 に答える 10

136

Angular はその変更を認識していません。このためには、以下を呼び出す$scope.$digest()か、内部で変更を行う必要があり$scope.$apply()ます。

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

ダーティチェックをよりよく理解するには、これを参照してください

更新：これは例です

于 2012-08-08T22:00:11.853 に答える
31

使用するだけです。

$('#selectedDueDate').val(dateText).trigger('input');
于 2015-03-06T14:37:29.087 に答える
17

変数をスコープに対して直接配置しないと、より確実に更新されることがわかりました。

「dateObj.selectedDate」を使用してみて、コントローラーで selectedDate を dateObj オブジェクトに追加します。

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

これは私にとってはうまくいきました。

于 2013-10-29T18:18:46.363 に答える
5

これを試して

var selectedDueDateField = document.getElementById("selectedDueDate");
var element = angular.element(selectedDueDateField);
element.val('new value here');
element.triggerHandler('input');
于 2015-05-26T03:11:35.387 に答える
3

Angular の範囲外で何が起こっても、Angular はそれを知ることはありません。

ダイジェスト サイクルは、モデル -> コントローラー、次にコントローラー -> モデルからの変更を配置します。

最新のモデルを見る必要がある場合は、ダイジェスト サイクルをトリガーする必要があります

ただし、進行中のダイジェスト サイクルの可能性があるため、サイクルを確認して開始する必要があります。

できれば、常に安全な適用を実行してください。

       $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.
      });
于 2016-07-19T18:35:07.413 に答える
3

関数の最後で次の行を実行するだけです。

$scope.$apply()

于 2017-02-24T16:35:37.290 に答える
2

ng-model は入力イベントをリッスンし、スコープが更新されるため、入力要素の変更イベントをトリガーする必要があります。ただし、通常の jQuery トリガーは機能しませんでした。しかし、これが魅力のように機能するものです

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

フォローがうまくいかなかった

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

合成イベントの作成とディスパッチについて詳しく読むことができます。

于 2017-11-10T10:22:01.160 に答える
1

使用するだけです：

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

それ以外の：

$('#selectedDueDate').val(dateText);
于 2018-05-24T11:07:51.260 に答える
1

AngularJS は、文字列、数値、およびブール値を値で渡し、配列とオブジェクトを参照で渡します。したがって、空のオブジェクトを作成して、日付をそのオブジェクトのプロパティにすることができます。このようにして、angular はモデルの変更を検出します。

コントローラ内

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>
于 2015-04-15T06:50:32.450 に答える
0

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

この回答は、私の回答から別の同様の質問にそのままコピーされました。

于 2015-03-12T17:49:18.970 に答える