javascript - 动态更新文本框后更新范围值

Question

在 AngularJS 中，我有这样的场景:用户从弹出窗口的网格中选择一个值，并且所选值显示在容器页面的文本框中。用户选择一个值后，弹出窗口会引发一个在容器页面中捕获的事件。现在我可以使用 .val() 设置文本框的值，但是如何更新模型？

$scope.$on('rowSelectedInPopup', function (event: ng.IAngularEvent, ...data) {
    if (elementId === data[1].toString()) {
        $(elementId).val(data[0].toString());
        $(elementId + "_inlinelbl").html(data[0].toString());
    }
});

这是我的文本框和标签 html:

<input type="text" value="" id="ServiceManagerglookup" ng-model="Model.Person2.Name" />
<label id="ServiceManagerglookup_inlinelbl" ng-model="Model.Person2.Name">ABC</label>

请注意，文本框可以与范围内的任意字段绑定(bind)，例如型号.AVC.XYZ.LMN

Answer 1

除了更改值之外，您还需要通知 Angular 值已更改，使用

$(elementId).trigger('输入');

像这样

$scope.$on('rowSelectedInPopup', function (event: ng.IAngularEvent, ...data) {
    if (elementId === data[1].toString()) {
        $(elementId).val(data[0].toString());
        $(elementId + "_inlinelbl").html(data[0].toString());
        $(elementId).trigger('input');
    }
});

此输入监听器的触发通常由浏览器完成 - 因此当您直接更改模型时，您也被迫触发该事件。