如何使用jQuery以编程方式将ng-pristine设置为ng-dirty

Question

我正在尝试在输入中设置用户名。它填充输入并运行按键事件，但不会将 ng-pristine 更改为 ng-dirty。知道吗？

我的代码：

var username = ["u", "s", "e", "r"];
$("#username").keypress(function(event) {
  var key = event.keyCode || event.which;
  $('#username').val($('#username').val() + String.fromCharCode(key));
});
for (var i=0;i< username.length;i++){
  var c = username[i];
  $('#username').trigger(jQuery.Event('keypress', {which: c.charCodeAt(0)}));
};

Answer 1

当您在角度范围之外工作时，您需要手动触发$scope.$apply()以触发更改。此外，您必须手动设置标志setDirty()。

获取当前正在使用的控制器范围的引用。

var scope = angular.element(document.querySelector("controllerSelector")).scope();

现在，在按键事件中，触发摘要周期。

var username = ["u", "s", "e", "r"];
$("#username").keypress(function(event) {
    var key = event.keyCode || event.which;
    $('#username').val($('#username').val() + String.fromCharCode(key));
    scope.$apply();
});
for (var i=0;i< username.length;i++){
    var c = username[i];
    $('#username').trigger(jQuery.Event('keypress', {which: c.charCodeAt(0)}));
    scope.$apply();
};

这必须主要解决您的问题。如果没有，您可能需要手动触发setDirty()。在作用域中指向窗体并设置脏标志。

scope.formName.$setDirty();

Answer 2

为什么要混合jquery和angular？你永远不应该这样做。如果您想监听更改事件或点击。将 ng-click 或 ng-change 附加到 dom 元素，或在控制器中设置$watch以侦听对模型的任何更改。在同一个项目中混合使用 jquery 选择器和 angular 是一种不好的做法。Angular拥有您希望从jquery中获得的所有功能。