angularjs ng-model 没有更新

Question

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

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

https://i.gyazo.com/21d80e370726166a200f1165e169a0cf.gif，特此举个例子。

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

我手上的代码：

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

您的问题是 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。我将把它留作 reader.

的练习

Answer 2

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

为了更新模型，您需要设置 hook on the icon picker updating process : whenever you select an icon, either overwrite the iconInput scope variable yourself (and wrap this in a $scope.$apply call) or much more simply, trigger the 'input' event on the input element, which will cause Angular to pick up the new value (see 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 class（可能是 jquery.d.ts 文件），其中不包含 iconPicker() 方法。在运行时 Angular 中编译的 <script> 标签的内容被直接解释为普通的 Javascript，避免了 Typescript 的类型检查。

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

angularjs ng-model 没有更新

angularjs ng-model doesn't update

javascript

angularjs

font-awesome

typescript

devextreme