使用jQuery值更新Angular模型

Question

嗨我有一个输入字段附加了我的模型，当用户手动输入时，一个函数在更改时调用 - 这个工作正常，模型在控制台日志中按预期反映。

<input type="text" class="rating" ng-model="review.Rating" ng-change="change()" />

我现在的问题是我有第二个jQuery函数，可以由用户在页面上调用自动填充输入字段，但这似乎不会触发模型的更新只有视觉输入字段的值。

因此我在第二个jQuery中添加了以下调用以触发更新（基于我的研究，这应该是正确的）

$(".rating").trigger('input');

这似乎在Firefox和Chrome中运行良好，因为我在控制台日志中反映了该模型，但在IE中（我有11个 - 不确定旧浏览器）触发输入似乎不能更新模型。

希望你能提供帮助。

Answer 1

更新回答：

我认为它不起作用，因为Angular可能不知道这种变化。在更新模型或在$ scope内添加函数后，尝试调用$ scope。$ digest（）。$ apply（function（）{$ .....}）;

您可以在控制器中添加一个函数，而不是使用jQuery，该函数将值赋给ng-model。

e.g。

<input type="text" ng-model="data.input" />
<button ng-click="autoFill()">Click me</button>

并在您的控制器中

$scope.autoFill = function() {
    $scope.data.input = "Hello World!";
};

Answer 2

因为您要更新Angular上下文之外的文本字段值，您需要告诉Angular重新加载$apply()中的更改。因此，如果您有权访问范围变量，请在通过jQuyery设置输入字段的值后直接调用$scope.$apply(); ：

$scope

但是如果您无法访问<div id="foo"> <input type="text" class="rating" ng-model="review.Rating" ng-change="change()" /> </div> ，则可以使用任何父元素或输入字段本身来获取范围：

假设您的HTML如下所示：

angular.element(document.querySelector("#foo")).scope().$apply();

然后这样做：

listBox1.Text += Record; // append