Question

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

我还阅读了一些关于使用范围的帖子。$ 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>'
    }
});

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

2 个答案: