angularjs를 사용하여 인라인 편집

Question

Angular 지시문을 사용하여 양식에서 인라인 편집을하려고합니다. 불행히도 두 가지 문제가 발생 했으므로 둘레에서 벗어날 수 없으므로 다른 의견을 보내 주시면 대단히 감사하겠습니다. 그것은 불행하게도, 당신은 내가 (이 경우 esc 키)에 키 입력을 듣고 생각하는 부분을 추가 볼 수 있듯이 및 종료 편집 모드 : http://jsfiddle.net/jorgecas99/bc65N/

질문 1 : 여기

는 바이올린입니다 작동 안됨. 나는 '들어간다'라는 열쇠 13을 듣기 위해 노력했다. 그리고 그것은 잘 돌아갔다. 그래서 나는 이해하지 못한다.

질문 2 : 새 지시문을 만들 필요없이 클릭하여 편집 할 때 두 번째 필드를 드롭 다운으로 변경하고 싶습니다. 나는 확실히 코드 라인 수를 염려합니다. 그래서 이것이 하나의 지시어로 달성 될 수 있다면, 그것은 제가 선호하는 옵션이 될 것입니다.

감사합니다.

첫 번째 질문에 대한

Answer 1

, 당신이 VAR MyApp를 참고하시기 바랍니다 여기 http://css-tricks.com/snippets/javascript/saving-contenteditable-content-changes-as-json-with-ajax/http://jsfiddle.net/bonamico/cAHz7/

var myApp = angular.module('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/

참조, 나는 코드 모듈을 만들고 유지 보수가있을 줄의 코드 numer에를 최소화하는 것은, 일반적으로 주요한 문제가 아닌 것을 제안합니다. 따라서 두 지시어를 작성하는 것이 좋습니다. 두 지시문이있는 경우 공통 부분에 대한 일반적인 javascript 함수를 작성하는 것이 좋습니다.