注意

Question

我在AngularJS中有一个页面，该页面的表单包含一些字段。加载该页面后，我需要一个书签，单击该书签可根据配置文件中的数据填充字段。正在使用一个JS文件，该文件使用jquery填写表格中的数据

当我执行$("#id").val('abcd')时，该字段填充了文本abcd，但是angularjs认为该格式仍然无效。类ng-pristine ng-invalid仍然保留在元素上。我尝试删除使用jquery的removeClass()并使用ng-dirty ng-valid添加addClass()类，但是表单的状态仍然无效。

如何让angularjs知道表单字段已填充且表单有效？

Answer 1

ng-model控制器侦听'change'事件。

<input id="id" ng-model="$ctrl.text" />

要从jQuery触发它：

$("#id").val("abcd").trigger("change");

这将设置输入的值并触发ngModelController来更新AngularJS框架中的模型。

演示

$(function() {
  $("#bt").on("click", function() {
    $("#id").val("abcd").trigger("change");
  });
})

<script src="//unpkg.com/jquery"></script>
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
    <input id="id" ng-model="$ctrl.text" /><br>
    text={{$ctrl.text}}<br>
    <button id="bt">Click me</button>
</body>

注意

在AngularJS库之前加载jQuery库很重要。

从文档中：

要使用jQuery，只需确保将其加载到angular.js文件之前即可。

有关更多信息，请参见AngularJS angular.element API Reference。

Answer 2

输入数据后，调用$ apply。

$scope.$apply()

当事件发生在angular之外时，它可用于挂钩angular的摘要周期。

从Docs

$ apply（）用于从AngularJS框架之外的AngularJS中执行表达式。（例如，来自浏览器DOM事件，setTimeout，XHR或第三方库）。因为我们正在调用AngularJS框架，所以我们需要执行适当的范围范围的异常处理生命周期，并执行监视。

如何通知AngularJS jQuery已在外部填充表单？

2 个答案:

演示

注意