AngularJS：使用 jQuery 更改时，ng-model 绑定不会更新

IT技术 javascript jquery angularjs data-binding angular-ngmodel
2021-03-15 05:20:48

这是我的 HTML：

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

当我在框中键入内容时，模型将通过 2 路绑定机制进行更新。甜的。

但是，当我通过 JQuery 执行此操作时...

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

它不会更新模型。为什么？

6个回答

Angular 不知道这种变化。为此，您应该调用$scope.$digest()或在内部进行更改$scope.$apply()：

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

看到这个以更好地理解脏检查

更新：这是一个例子

见这个fiddle.jshell.net/agvTz/38你应该调用function$scope.$apply 传递一个函数作为参数。当您对 $scope 进行更改时，应该调用 $apply，因此，在 onSelect 内部。啊，我希望你将 DOM 操作放在控制器中只是为了举例，在真实的应用程序中这是错误的;)
2021-04-25 05:20:48
那么我应该怎么做才能进行良好的角度练习？将 DOM 操作分离成一个指令？
2021-04-30 05:20:48
是的，这里有一个示例fiddle.jshell.net/agvTz/39该指令可以datepicker="scopeKeyThatYouWant"在输入中使用简单的多次使用
2021-05-01 05:20:48
只需调用.. $scope.$digest() 来解决。它会变慢吗？
2021-05-07 05:20:48
我像你说的那样做了这个： fiddle.jshell.net/AladdinMhaimeed/agvTz/8但它不起作用
2021-05-09 05:20:48

只需使用; 

$('#selectedDueDate').val(dateText).trigger('input');
Alhamdulillah，完美，它对我有用。感谢节省我的时间
2021-04-24 05:20:48
我trigger('input')在它的onSelect事件中使用了日期选择器。它正确更新值。
2021-04-25 05:20:48
这对我有用。我正在更新来自指令测试的绑定输入的值，并将.val('something'调用包装在$apply（或$digest之后调用）中不起作用。
2021-05-03 05:20:48
经过数小时的搜索，这是有效的！谢谢！
2021-05-08 05:20:48
真的。我正在使用$('#selectedDueDate').val(dateText).trigger('change');它对我不起作用。.trigger('input');像魔术一样工作
2021-05-13 05:20:48

我发现如果你不直接将变量放在作用域上，它会更可靠地更新。

尝试使用一些“dateObj.selectedDate”并在控制器中将 selectedDate 添加到 dateObj 对象，如下所示：

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

这对我有用。

对我来说效果很好！我想知道为什么在裸机上它不起作用。
2021-04-18 05:20:48
它与 angular 关系不大，而与 javascript 的工作方式有很大关系。当您将范围变量分配给对象时，您是通过引用分配它，而不是在将 var 设置为等于原始值时按值分配。我在这里的帖子中谈到了它。stackoverflow.com/questions/14527377/…。我引用了我在那篇文章中制作的这个plunk来说明plnkr.co/edit/WkCT6aYao3qCmzJ8t5xg?p=preview。
2021-04-18 05:20:48
这对我也有用。我浪费了 2 多个小时试图弄清楚为什么双向绑定不起作用。它在页面上运行良好，但控制器中的范围没有更新。然后我出于绝望尝试了你的方法（因为我认为这应该是真的没有任何意义）并且该死的，它奏效了！谢谢！
2021-04-30 05:20:48
在这里也一样 - 任何 angularJs 大师都可以解释为什么会这样吗？这就像视图有它自己的嵌套范围，有时你会卡住只更新视图范围，而不是控制器范围
2021-05-09 05:20:48

试试这个

var selectedDueDateField = document.getElementById("selectedDueDate");
var element = angular.element(selectedDueDateField);
element.val('new value here');
element.triggerHandler('input');
当您无权访问 angular 的控制器 $scope 时，它​​是可用的。例如，当您使用 Tampermonkey 编写脚本时。
2021-05-10 05:20:48

只需在函数末尾运行以下行：

$scope.$apply()

其它你可能感兴趣的问题
上一篇JavaScript 在 DOM 中移动元素 下一篇将 FontAwesome 图标添加到 D3 图形