1

Angular ディレクティブを使用してフォームでインライン編集を行おうとしていますが、残念ながら 2 つの問題に遭遇し、それらを回避できないため、セカンドオピニオンをいただければ幸いです。

ここにフィドルがあります：http://jsfiddle.net/jorgecas99/bc65N/

質問 1: ご覧のとおり、キー ストローク (この場合は esc キー) をリッスンして編集モードを終了するセクションを追加しましたが、残念ながら機能していません。「Enter」であるキー13を聞いてみましたが、うまくいきましたので、わかりません。

質問 2: 新しいディレクティブを作成せずにクリックして編集するときに、2 番目のフィールドをドロップダウンに変更したいのですが、それは可能ですか? 私は確かにコードの行数を気にしているので、これが 1 つのディレクティブで達成できるのであれば、それが私の好みのオプションです。

ありがとうございました！

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/も参照して ください。

2 番目の質問については、通常、コードの行数を最小限に抑えることは主な関心事ではありませんが、コードをモジュール化して保守しやすくすることは重要です。したがって、2 つのディレクティブを作成し、2 つのディレクティブに共通する部分がある場合は、共通の JavaScript 関数を作成することをお勧めします。

于 2012-10-31T15:36:44.173 に答える