blocks|key|1932949|text|只需使用；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1932950|$('#selectedDueDate').val(dateText).trigger('input');|code-block|syntax|javascript|1932951|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just use; </p>

<pre><code>$('#selectedDueDate').val(dateText).trigger('input');
</code></pre>


blocks|key|1719255|text|我发现，如果不将变量直接放在作用域上，它会更可靠地更新。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719256|尝试使用一些"dateObj.selectedDate“，并在控制器中将selectedDate添加到dateObj对象中，如下所示：|1719257|$scope.dateObj+=+{selectedDate:+new+Date()}|code-block|syntax|javascript|1719258|这对我很有效。|1719259|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I have found that if you don't put the variable directly against the scope it updates more reliably.</p>

<p>Try using some "dateObj.selectedDate" and in the controller add the selectedDate to a dateObj object as so:</p>

<pre><code>$scope.dateObj = {selectedDate: new Date()}
</code></pre>

<p>This worked for me.</p>


blocks|key|1933211|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1933212|var+selectedDueDateField+=+document.getElementById("selectedDueDate");
var+element+=+angular.element(selectedDueDateField);
element.val('new+value+here');
element.triggerHandler('input');|code-block|syntax|javascript|1933213|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this</p>

<pre><code>var selectedDueDateField = document.getElementById("selectedDueDate");
var element = angular.element(selectedDueDateField);
element.val('new value here');
element.triggerHandler('input');
</code></pre>


blocks|key|1933242|text|无论在Angular范围之外发生了什么，Angular永远不会知道这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1933243|摘要循环将更改从模型->控制器放入，然后从控制器->模型。|1933244|如果您需要查看最新的Model，则需要触发摘要周期|1933245|但是有可能正在进行一个摘要周期，所以我们需要检查并初始化这个周期。|1933246|最好，始终执行安全应用。|1933247|+++++++$scope.safeApply+=+function(fn)+{
++++++++++++if+(this.$root)+{
++++++++++++++++var+phase+=+this.$root.$$phase;
++++++++++++++++if+(phase+==+'$apply'+%7C%7C+phase+==+'$digest')+{
++++++++++++++++++++if+(fn+&&+(typeof+(fn)+===+'function'))+{
++++++++++++++++++++++++fn();
++++++++++++++++++++}
++++++++++++++++}+else+{
++++++++++++++++++++this.$apply(fn);
++++++++++++++++}
++++++++++++}
++++++++};


++++++$scope.safeApply(function(){
++++++++++//+your+function+here.
++++++});|code-block|syntax|javascript|1933248|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Whatever happens outside the Scope of Angular, Angular will never know that. </p>

<p>Digest cycle put the changes from the model -> controller and then from controller -> model. </p>

<p>If you need to see the latest Model, you need to trigger the digest cycle </p>

<p>But there is a chance of a digest cycle in progress, so we need to check and init the cycle.</p>

<p>Preferably, always perform a safe apply.</p>

<pre><code>       $scope.safeApply = function(fn) {
            if (this.$root) {
                var phase = this.$root.$$phase;
                if (phase == '$apply' || phase == '$digest') {
                    if (fn &amp;&amp; (typeof (fn) === 'function')) {
                        fn();
                    }
                } else {
                    this.$apply(fn);
                }
            }
        };


      $scope.safeApply(function(){
          // your function here.
      });
</code></pre>


blocks|key|1719708|text|只需在函数的末尾运行以下代码行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719709|$scope.$apply()|1719710|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Just run the following line at the end of your function: </p>

<p>$scope.$apply() </p>


blocks|key|1719557|text|AngularJS通过值传递字符串、数字和布尔值，同时通过引用传递数组和对象。因此，您可以创建一个空对象，并使您的日期成为该对象的属性。通过这种方式，angular将检测到模型的变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719558|在控制器中|1719559|app.module('yourModule').controller('yourController',function($scope){
$scope.vm={selectedDate:''}
});|code-block|syntax|javascript|1719560|在html中|1719561|<div+ng-controller="yourController">
<input+id="selectedDueDate"+type="text"+ng-model="vm.selectedDate"+/>
</div>|1719562|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>AngularJS pass string, numbers and booleans by value while it passes arrays and objects by reference. So you can create an empty object and make your date a property of that object. In that way angular will detect model changes.</p>

<p>In controller</p>

<pre><code>app.module('yourModule').controller('yourController',function($scope){
$scope.vm={selectedDate:''}
});
</code></pre>

<p>In html</p>

<pre><code>&lt;div ng-controller="yourController"&gt;
&lt;input id="selectedDueDate" type="text" ng-model="vm.selectedDate" /&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1719762|text|只需使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719763|$('#selectedDueDate').val(dateText).trigger('input');|code-block|syntax|javascript|1719764|而不是：|1719765|$('#selectedDueDate').val(dateText);|1719766|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Just use:</p>

<pre><code>$('#selectedDueDate').val(dateText).trigger('input');
</code></pre>

<p>instead of:</p>

<pre><code>$('#selectedDueDate').val(dateText);
</code></pre>


blocks|key|1719403|text|我已经为jQuery编写了这个小插件，它将使所有对.val(value)的调用都更新angular元素(如果存在)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1719404|(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);|code-block|syntax|javascript|1719405|只要在jQuery和angular.js和val(value)更新之后弹出这个脚本就可以了。|1719406|1719407|精简版本：|1719408|!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);|1719409|1719410|示例：|1719411|​|1719412|//+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+=+""+%2B+$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+%2B+1);
++++});
++});
})(window.jQuery);|1719413|<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">%2B</button>
</div>|1719414|1719415|1719416|此答案是从my+answer+to+another+similar+question逐字复制而来的。|1719417|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/29016756/1185053^0|P|B|0|0|L|A|0|0|0|0|0|0|0|0|0|0|0|5|11|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1K|8|@]|D|@]|E|$]]|$1|P|3|Q|5|H|7|1L|8|@]|D|@]|E|$I|J]]|$1|R|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1N|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1O|8|@]|D|@]|E|$]]|$1|W|3|X|5|H|7|1P|8|@]|D|@]|E|$I|J]]|$1|Y|3|Z|5|H|7|1Q|8|@]|D|@]|E|$I|J]]|$1|10|3|V|5|6|7|1R|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|1T|8|@]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|14|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|15|$16|$5|17|18|19|E|$1A|1B]]]]

<p>I've written this little plugin for jQuery which will make all calls to <code>.val(value)</code> update the angular element if present:</p>

<pre><code>(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);
</code></pre>

<p>Just pop this script in after jQuery and angular.js and <code>val(value)</code> updates should now play nice.</p>

<hr>

<p>Minified version:</p>

<pre><code>!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);
</code></pre>

<hr>

<p>Example:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div ng-app="example" ng-controller="ExampleController"&gt;
  &lt;input type="number" id="input" ng-model="input" ng-change="change()" /&gt;
  &lt;span&gt;{{output}}&lt;/span&gt;
  &lt;button id="button"&gt;+&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p>This answer was copied verbatim from <a href="https://stackoverflow.com/a/29016756/1185053">my answer to another similar question</a>.</p>


<p>This is my HTML:</p>

<pre><code>&lt;input id="selectedDueDate" type="text" ng-model="selectedDate" /&gt;
</code></pre>

<p>When I type into the box, the model is updated via the 2-way-binding mechanism. Sweet.</p>

<p><em>However</em> when I do this via JQuery...</p>

<pre><code>$('#selectedDueDate').val(dateText);
</code></pre>

<p>It doesn't update the model. Why?</p>


AngularJS : ng-model binding not updating when changed with jQuery

jQuery

这是我的HTML：<input id="selectedDueDate" type="text" ng-model="selectedDate" />当我在框中键入内容时，模型将通过双向绑定机制更新。甜。但是，当我通过JQuery执行此操作时...$('#selectedDueDate').val(dateText);它不会更新模型。为什么？

问AngularJS :ng-使用jQuery更改时不更新模型绑定
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS :ng-使用jQuery更改时不更新模型绑定EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS :ng-使用jQuery更改时不更新模型绑定
EN