内联编辑与angularjs

我试图做一个Angular指令的形式内联编辑，不幸的是我遇到了两个问题，我无法绕过他们，所以第二个意见将非常感激。内联编辑与angularjs

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

问题1：正如你可以看到我补充说，是想听听击键（在这种情况下，按ESC键）一节，并退出编辑模式，遗憾的是它不管用。我试着聆听“进入”键13并且工作正常，所以我不明白。

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

谢谢！

2012-10-17 J Castillo

对于第一个问题，你可以看到你摆弄的修订版本，其中包括在 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/

见对于第二个问题，我的建议是尽量减少代码的行NUMER通常不是一个主要关注点，同时使代码的模块化和可维护性是。因此，创建两个指令肯定会更好，并且可能还会为两者之间的共同部分（如果有的话）使用常用的JavaScript函数。

来源

2012-10-31 15:36:44

超级谢谢卡罗，这有帮助。 –

ctrl。$ setViewValue（elm.html（））;在if（esc）块中不需要，因为您正在触发模糊，并且已经在模糊处理程序中始终执行该操作 – felixfbecker

内联编辑与angularjs

回答

相关问题