使用angularjs进行内联编辑

我正在尝试用一个角度指令的形式进行内联编辑，不幸的是我遇到了两个问题，我无法回避它们，所以我非常感谢您的第二个意见

这是小提琴：

问题1： 正如您所看到的，我添加了一个部分，该部分假定在本例中使用esc键并退出编辑模式，但不幸的是，它不起作用。我试着听13号键，它是“回车”，它工作正常，所以我不明白

问题2： 当你点击编辑第二个字段而不需要创建一个新的指令时，我想把它改成一个下拉列表，这可能吗？我当然关心代码行数，所以如果这可以通过一个指令实现，那么这将是我的首选

---

谢谢大家!

对于第一个问题，您可以看到小提琴的修订版，其中包含了中所述的技巧 这里

请注意，var myApp=缺失，因此未执行以下声明

myApp.directive('contenteditable', function() {
return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
        // view -> model
        elm.bind('blur', function() {
            scope.$apply(function() {
                ctrl.$setViewValue(elm.html());
            });
        });

        // model -> view
        ctrl.render = function(value) {
            elm.html(value);
        };

        // load init value from DOM
        ctrl.$setViewValue(elm.html());

        elm.bind('keydown', function(event) {
            console.log("keydown " + event.which);
            var esc = event.which == 27,
                el = event.target;

            if (esc) {
                    console.log("esc");
                    ctrl.$setViewValue(elm.html());
                    el.blur();
                    event.preventDefault();                        
                }

        });

    }
};

})

另见

---

对于第二个问题，我建议尽量减少代码行数通常不是一个主要问题，而使代码模块化和可维护则是一个主要问题。因此，最好创建两个指令，并为这两个指令之间的公共部分（如果有）创建一个公共javascript函数。

对于第一个问题，您可以看到一个修订版的小提琴，其中包含了中描述的技术 这里

请注意，var myApp=缺失，因此未执行以下声明

myApp.directive('contenteditable', function() {
return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
        // view -> model
        elm.bind('blur', function() {
            scope.$apply(function() {
                ctrl.$setViewValue(elm.html());
            });
        });

        // model -> view
        ctrl.render = function(value) {
            elm.html(value);
        };

        // load init value from DOM
        ctrl.$setViewValue(elm.html());

        elm.bind('keydown', function(event) {
            console.log("keydown " + event.which);
            var esc = event.which == 27,
                el = event.target;

            if (esc) {
                    console.log("esc");
                    ctrl.$setViewValue(elm.html());
                    el.blur();
                    event.preventDefault();                        
                }

        });

    }
};

})

另见

---

对于第二个问题，我建议尽量减少代码行数通常不是一个主要问题，而使代码模块化和可维护则是一个主要问题。因此，最好创建两个指令，并为这两个指令之间的commonm部分（如果有的话）创建一个通用javascript函数。

ctrl.$setViewValueelm.html；在if esc块中不需要，因为您正在触发模糊，并且已经在模糊句柄Ctrl.$setViewValueelm.html中一直在这样做；在if-esc块中不需要，因为您正在触发模糊，并且在模糊处理程序中一直都在这样做