Angular JS：从 jquery 更改输入值不会更新 ng-model

Question

我是 AngularJS 的新手。我正在尝试编写一个输入字段列表的指令，当您按下逗号键（plunkr 中的 188 数字）时，它将触发“完成”功能，以便更新模型。我的指令中有一个带有这个值列表的 ng-repeat。

我还阅读了一些关于使用 scope.$apply 的帖子，但在这种情况下似乎不起作用。有关如何访问正在更改的 ng-repeat 中的项目或如何直接在该列表项上更新 ng-model 的任何帮助？

如果您查看我的 plunkr，请更改名称并在末尾加上逗号。在顶部的区域中，您可以看到模型的值。您可以看到逗号仍然存在，这不是我的预期行为，因为它不在输入字段本身中。

这里的代码： http://plnkr.co/edit/PBzRD8fBQ6D1GCEC869K?p=preview

Answer 1

查看我建议的更改，也许这就是您想要的用例

http://plnkr.co/edit/YXtVTJSQNyJo7njdiu4Z

如果您有任何问题，我会根据要求提供更多反馈；）

Answer 2

如果你只是想阻止用户输入逗号，你可以在没有 jQuery 的情况下做到这一点：

$html.on('keydown', 'li', function (e) {
    if (e.keyCode === 188) {
        return false;
    }
});

还有（据我所知，在有限的上下文中）没有理由使用 $compile。您应该可以只使用模板：

http://jsfiddle.net/VM285/

myApp.directive('mydirective', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            list: '='
        },
        link: function (scope, element, attrs) {
            element.bind('keydown', function (e) {
                if (e.keyCode === 188) {
                    e.preventDefault();
                    return false;
                }
            });
        },
        template: '<div><ul ng-model="list"><li ng-repeat="item in list"><input ng-model="item.Name" type="text" /></li></ul></div>'
    }
});

再进一步，您可以完全不使用 DOM 操作：

http://jsfiddle.net/VM285/1/

myApp.directive('mydirective', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            list: '='
        },
        link: function (scope, element, attrs) {
            scope.checkForComma = function(item) {
                if (item.Name.indexOf(',') > -1) {
                    item.Name = item.Name.replace(/,/g, '');
                }
            };
        },
        template: '<div><ul ng-model="list"><li ng-repeat="item in list"><input ng-model="item.Name" type="text" ng-change="checkForComma(item)" /></li></ul></div>'
    }
});