JQuery 与 angularjs ng-model 的集成

Posted 2023-05-09

【中文标题】JQuery 与 angularjs ng-model 的集成

【英文标题】：JQuery integration with angularjs ng-model

【发布时间】：2017-12-20 02:28:39

【问题描述】：

我想使用 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>

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

【问题讨论】：

谁想要使用包含 500 个值的下拉菜单？

【参考方案1】：

我找到答案了

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

代替

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