angularjs ng-model 不更新

Question

我有一个 Font Awesome 图标选择器，我将它用于我的应用程序，这样员工就可以轻松访问不同的图标，而无需在线搜索代码。

现在当我点击一个图标时，它不会更新 ng-model。我首先必须为 AngularJS 输入另一个字符或空格来识别输入中所做的更改。

https://i.gyazo.com/21d80e370726166a200f1165e169a0cf.gif，这是正在发生的事情的例子。

如您所见，在左下角，我制作了一个标签，显示同一 ng-model 中的数据。现在，当我选择一个图标时，模型不会更新。只有在我输入一个空格或另一个字符后它才会更新。

我的代码：

editCellTemplate: function (container, options) {
    container.html('<input class="icon-picker-input edit icp icp-auto" type="text" ng-model="iconInput" /><script>$(".icp-auto").iconpicker();</script>');
    options.setValue($scope.iconInput);
    $compile(container)($scope);
}

我正在使用来自 DevExtreme 的网格视图和自定义 editCellTemplate。

绑定：

这里声明：

有人知道如何解决这个问题吗？提前致谢！

Answer 1

您的代码未按预期工作的主要原因是 Angular 仅监视用户交互事件以更新模型。您的图标选择器通过直接在输入中设置值来完全绕过 Angular。

为了更新模型，您需要在图标选择器更新过程中设置hook：每当您选择图标时，要么自己覆盖iconInput范围变量（并将其包装在$scope.$apply调用中）或者更简单地说，触发输入元素上的'input' 事件，这将导致 Angular 获取新值（参见here）。

我建议你这样做：

editCellTemplate: function (container, options) {
    container.html('<input class="icon-picker-input edit icp icp-auto" type="text" ng-model="iconInput" />');
    options.setValue($scope.iconInput);        
    $compile(container)($scope);

    // Avoid inline script tags, you can make the iconpicker here
    $(".icp-auto").iconpicker();

    // Watch for icon picker selections
    $(".icp-auto").on('iconpickerSelected', function(e) {
        // Fire the "input changed" event
        $(e.currentTarget).trigger('input');
    });
}

请注意，我删除了编译后的 html 中的脚本标签，因为您可以在主代码中完美地实例化图标选择器。脚本标签在全局上下文中进行评估，这通常不是您想要的。

更新：您在评论中报告的编译时错误是由于您的 Typescript 设置具有 JQuery 类的定义（可能是 jquery.d.ts 文件），其中不包括iconPicker() 方法。在运行时，在 Angular 中编译的 <script> 标签的内容被直接解释为纯 Javascript，避免了 Typescript 的类型检查。

请参阅this answer，了解在 JQuery 接口上启用其他方法的简单方法。我强烈建议您停止将逻辑放入已编译的 <script> 元素中，它很有可能会回来咬您。

Answer 2

您的问题是 iconpicker() 更新 input 没有 Angular 注意到。解决这个问题的方法是直接调用$scope.$apply()。这里的问题是您包含脚本的奇怪方式。 jQuery 语法只会调用 iconpicker() 来匹配第一个元素，所以我认为如果你在演示中编辑第二行，它根本不会起作用。

相反，生成一个数字 id 并更改为：

editCellTemplate: function (container, options) {
    container.html('<input class="icon-picker-input edit icp icp-auto"' +
      ' type="text" ng-model="iconInput" id="uniqueID"/>' +
      '<script>$("#uniqueID").iconpicker();$scope.$apply();</script>');
    options.setValue($scope.iconInput);
    $compile(container)($scope);
}

...其中 uniqueID 显然是唯一 ID。我将把它作为练习留给读者。