JQuery 与 angularjs ng-model 的集成

Question

我想使用 jQuery 为 Angular 创建自定义下拉列表，并且在调用 jQuery .val(newValue) 后无法更新 Angular 模型。为什么我使用 jQuery？因为在某些页面中，我几乎没有包含约 500 个元素的下拉菜单，而且纯角度渲染的工作速度非常慢。这是我的指令链接功能：

(scope, element) => {
  const parent = $(element);
  const field = parent.find('input');
  const list = parent.find('ul');
  scope.options.map(item => list.append(
    $('<li>')
      .text(item.text)
      .addClass(item.disabled && 'disabled')
      .data({
        value: item.value,
        disabled: item.disabled
      })
      .click(function () {
        const data = $(this).data();
        if (!data.disabled) {
          field
            .val(data.value)
            .trigger('change'); 
          // also tried => scope.model = data.value;
        }
      })
  ));
}

这是模板：

<div class="dropdown">
  <input
    type="text"
    readonly
    placeholder="Select item"
    ng-model="model"
    ng-change="change">
  <ul></ul>
</div>

在stackoverflow上，我发现应该调用.trigger('change')，但改变模型没有帮助。如何更新角度模型？

Answer 1

我找到答案了

scope.$parent.$apply(() => {
  scope.model = data.value;
});

代替

field
  .val(data.value)
  .trigger('change');