angularjs ng-model不会更新

Question

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

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

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

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

我的代码：

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 的gridview和自定义editCellTemplate。

绑定：

在此宣布：

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

Answer 1

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

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

我建议你这样做：

'input'

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

更新：您在评论中报告的编译时错误是由于您的Typescript设置有JQuery类的定义（可能是jquery.d.ts文件）不包含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'); }); } 方法。在运行时，Angular中编译的iconPicker()标记的内容直接解释为普通Javascript，避免使用Typescript的类型检查。

有关在JQuery界面上启用其他方法的简单方法，请参阅this answer。我强烈建议你不要把逻辑放在编译的<script>元素中，它很有可能会回来咬你。

Answer 2

您的问题是iconpicker()在没有Angular注意的情况下更新input。解决这个问题的方法是直接调用$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。我将此作为练习留给读者。