1

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

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

问题 1：如您所见，我添加了一个部分，假设是听击键（在本例中为 esc 键）并退出编辑模式，不幸的是它不起作用。我尝试听“输入”键 13 并且工作正常，所以我不明白。

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

谢谢！

4

1 回答 1

4

对于第一个问题，您可以在 此处看到包含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 函数（如果有的话）。

于 2012-10-31T15:36:44.173 回答