内嵌编辑，angularjs [英] inline editing with angularjs

问题描述

我试图做内联编辑的形式与角指令，不幸的是我遇到了两个问题，我不能在他们周围得到的，所以第二个意见会非常多AP preciated。

I'm trying to do inline editing in a form with an Angular directive, unfortunately I ran into two issues and I can't get around them, so a second opinion will be very much appreciated.

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

问题1：
正如你可以看到我补充说，是假设听击键一节（在这种情况下，按ESC键）并退出编辑模式，遗憾的是它不工作。我想监听键13是输入和工作好了，我不明白。

Question 1: As you can see I added a section that is suppose to listen to key strokes (in this case the esc key) and exit the edit mode, unfortunately it is not working. I tried listening for key 13 which is 'enter' and that worked ok, so I don't understand.

问题2：
我会想第二个字段更改为下拉当你点击，而无需创建一个新的指令来编辑它，就是甚至可能吗？我当然在乎code的行数，如果这可以用一个指令来实现的，那么这将是我的preferred选项。

Question 2: I will like to change the second field to a dropdown when you click to edit it without having to create a new directive, is that even possible? I certainly care about number of lines of code so if this can be achieve with one directive, then that would be my preferred option.

感谢您！

推荐答案

对于第一个问题，你可以看到你摆弄的修订版本，其中包括描述的技术
<一href=\"http://css-tricks.com/snippets/javascript/saving-contenteditable-content-changes-as-json-with-ajax/\" rel=\"nofollow\">http://css-tricks.com/snippets/javascript/saving-contenteditable-content-changes-as-json-with-ajax/这里 http://jsfiddle.net/bonamico/cAHz7/

for first question, you can see a revised version of your fiddle which incorporate the technique described in http://css-tricks.com/snippets/javascript/saving-contenteditable-content-changes-as-json-with-ajax/ here http://jsfiddle.net/bonamico/cAHz7/

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

请注意，VAR对myApp =不见了，所以下面的声明没有执行

please note that var myApp = was missing, and so the following declaration did not execute

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/

对于第二个问题，我建议尽量减少code线的NUMER通常不是一个主要关注点，同时使code模块化和可维护的。因此，这将是肯定更好创建两个指令，以及可能的一个共同的JavaScript函数为两者之间的commonm份，如果有的话。

For the second question, I would suggest that minimizing numer of lines of code is not normally a main concern, while making code modular and maintainable is. So it would be definitely better to create two directives, and possibly a common javascript function for the commonm parts between the two, if any.

这篇关于内嵌编辑，angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！