AngularJS:ng-model 绑定在使用 jQuery 更改时不会更新
AngularJS : ng-model binding not updating when changed with jQuery
这是我的HTML:
<input id="selectedDueDate" type="text" ng-model="selectedDate" />
当我在框中键入时,模型通过 2 向绑定机制更新。甜。
但是当我通过 JQuery 执行此操作时...
$('#selectedDueDate').val(dateText);
它不会更新模型。为什么?
Angular 不知道这种变化。为此,您应该调用$scope.$digest()
或在$scope.$apply()
内部进行更改:
$scope.$apply(function() {
// every changes goes here
$('#selectedDueDate').val(dateText);
});
请参阅此处以更好地了解脏检查
更新:这是一个示例
只需使用;
$('#selectedDueDate').val(dateText).trigger('input');
我发现,如果您不直接将变量放在作用域上,它会更可靠地更新。
尝试使用一些"dateObj.selectedDate",并在控制器中将selectedDate添加到dateObj对象中,如下所示:
$scope.dateObj = {selectedDate: new Date()}
这对我有用。
试试这个
var selectedDueDateField = document.getElementById("selectedDueDate");
var element = angular.element(selectedDueDateField);
element.val('new value here');
element.triggerHandler('input');
只需在函数末尾运行以下行:
$scope.$apply()
您必须触发输入元素的更改事件,因为 ng-model 侦听输入事件并且范围将更新。但是,常规的jQuery触发器对我不起作用。但这就是魅力
$("#myInput")[0].dispatchEvent(new Event("input", { bubbles: true })); //Works
关注不起作用
$("#myInput").trigger("change"); // Did't work for me
您可以阅读有关创建和调度综合事件的详细信息。
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.
});
AngularJS按值传递字符串,数字和布尔值,同时通过引用传递数组和对象。因此,您可以创建一个空对象,并将日期设置为该对象的属性。通过这种方式,角度将检测模型变化。
在控制器中
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>
只需使用:
$('#selectedDueDate').val(dateText).trigger('input');
而不是:
$('#selectedDueDate').val(dateText);
我已经为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>
这个答案是从我对另一个类似问题的回答中逐字复制的。
- jQuery-更新jQuery.ajax().done()中点击的图像
- 如何更新jQuery Mobile全局弹出窗口的位置
- 更新jquery后文件上传不起作用
- 在ReactJs中更新组件时更新jQuery slick carousel
- 拖动事件后更新jQuery中jqxListBox的列表
- 如何停止将值追加到仅更新 jQuery 中的值
- 无法多次更新 jQuery 中 Ajax 调用的全局变量
- 使用 google api 地址更新 jQuery jqgrid 列
- 使用 Angular JS 动态更新 jQuery UI 属性的最佳方法
- 更新 jQuery 中的全局变量
- 如何在键入时更新 jQuery 值
- 尝试使用 mysql 和 php 更新 jquery 变量
- 更新 jQuery UI 工具提示上的数字
- 动态更新jquery中的iframe内容
- 更新jquery插件选项而不刷新页面
- 如何使用客户端数据更新jQuery.dataTables中的所有数据
- 以编程方式根据值更新jQuery滑块的位置
- ASP.NET:如何更新JQuery或Javascript中的隐藏字段
- 更新:jquery对话框模式单选按钮未选择ajax
- 在Ajax调用期间更新jQuery项