Question

我正在尝试使用Angular指令在一个表单中进行内联编辑，不幸的是我遇到了两个问题，我无法绕过它们，因此非常感谢第二个意见。

这里是小提琴：http://jsfiddle.net/jorgecas99/bc65N/

问题1：正如你所看到的那样，我添加了一个部分，用于监听击键（在这种情况下是esc键）并退出编辑模式，不幸的是它无效。我试着听了13键，这是'输入'并且运行正常，所以我不明白。

问题2：当您单击编辑它而不必创建新指令时，我想将第二个字段更改为下拉列表，这是否可能？我当然关心代码行数，所以如果这可以用一个指令实现，那么这将是我的首选。

谢谢！

Answer 1

对于第一个问题，你可以看到你的小提琴的修订版本，其中包含了所描述的技术 http://css-tricks.com/snippets/javascript/saving-contenteditable-content-changes-as-json-with-ajax/ http://jsfiddle.net/bonamico/cAHz7/

var myApp = angular.module('myApp', []);

请注意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();                        
                }

        });

    }
};

}）;

另见 http://api.jquery.com/keydown/

对于第二个问题，我建议最小化代码行的数量通常不是主要问题，同时使代码模块化和可维护。因此，创建两个指令肯定会更好，并且可能是两者之间的共同部分的常见javascript函数（如果有的话）。

使用angularjs进行内联编辑

1 个答案: