встроенное редактирование с помощью angularjs

Для первого вопроса вы можете увидеть исправленную версию вашей скрипки, которая включает технику, описанную в http: // css-tricks. com / snippets / javascript / save-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 для общих частей между ними, если таковые имеются.