javascript - Angular JS 和复杂指令

Question

这是一个 AngularJS 小部件，它用可编辑的文本字段替换标签。单击文本会将其替换为输入字段，然后在输入上按回车键会更新现有资源。

我对自己生成的代码不满意。所有这些评估和申请真的有必要吗？我该如何改进？

使用

editable-text(model="activeCustomer.phone_number", resource="Customer", field="phone_number")

指令代码

.directive("editableText", function($injector){
  return {
    restrict: "E",
    templateUrl: document.views.directivePartials.editableText,
    link: function(scope, elem, attrs){
      $(elem).find(".noEdit").click(function(){
        scope.showEdit = true;
        scope.$apply();
      });

      var ENTER = 13;
      $(elem).find('.edit').keyup(function(event){
        if(event.keyCode == ENTER){
          var resource = $injector.get(attrs.resource);

          var params = {};
          params[attrs.field] = scope.value
          resource.update(params);
          scope.showEdit=false;
        }
      });

      scope.showEdit = false;
      scope.$watch(attrs.model, function(){
        scope.value = scope.$eval(attrs.model);
      });
    },
  };
})

模板

span.editableTextField
input.edit(type="text", ng-show="showEdit", ng-model="value")
span.noEdit(ng-show="!showEdit") {{value}}

Answer 1

我建议不要将 jQuery 与 Angular 一起使用，尤其是在您学习的时候。您所做的一切都不需要它。

1. 您可以通过在模板中使用 ngClick 来摆脱第一次使用 click 回调:

   <span class="editableTextField" ng-click="showEdit = true">
   

2. 您可以使用 Angular-UI 摆脱 keyup 回调购买:

   <input class="edit" ... ui-keypress="{enter: 'handleEnter()'}">
   

3. 我建议使用双向绑定(bind)，这样您就可以将数据正确地写回作用域。

4. 连接 $watch 时，您会获得新值作为第一个参数。这将为您节省另一个 $eval。

这是给你的 fiddle ... http://jsfiddle.net/maU9t/