AngularJS内容可编辑模糊输入

Question

我在div上添加了一个指令，以便能够编辑其内容并双向绑定到作用域。我想在按下返回按钮时模糊，我已经尝试了element[0].blur();，如下所示。然而，这不起作用。我该怎么办？

.directive("contenteditable", function() {
    return {
        restrict: "A",
        require: "ngModel",
        link: function(scope, element, attrs, ngModel) {
            function read() {
                ngModel.$setViewValue(element.html());
            }
            ngModel.$render = function() {
                element.html(ngModel.$viewValue || "");
            };
            element.bind("blur keyup change", function() {
                scope.$apply(read);
            });

            element.css('outline','none');
            element.bind("keydown keypress", function (event) {
                if(event.which === 13) {
                    element[0].blur();
                    event.preventDefault();
                }
            });
        }
    };
});

Answer 1

我猜您在HTML中误导了模型：

<input type="text" contenteditable ng-model="myModel"/> //add ng-model.

因为你的指令需要ng模型。

看到这里，它运行良好：http://plnkr.co/edit/g0qtbFJb1V4OxcXNRTVf?p=preview

使用div而不是input标记：http://plnkr.co/edit/UiosU1WvyUvhgLBlzX6r?p=preview

Answer 2

我找到了解决方案，诀窍是在调用element[0].blur(); 之前先调用$window.getSelection().removeAllRanges();