1

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

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

使用

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}}
4

3 回答 3

2

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

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

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

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

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

  3. 我建议使用双向绑定，以便您可以正确地将数据写回范围。

  4. 当你连线时$watch，你会得到新的值作为第一个参数。这将为您节省另一个$eval.

这是给你的小提琴...... http://jsfiddle.net/maU9t/

于 2013-05-07T19:39:01.510 回答
0

这是内联编辑器的一个版本。http://jsfiddle.net/pUMer/

主要特征：

  • 配置内联编辑器的初始模式
  • 每个内联编辑器的单独作用域，这样它就不会干扰父作用域
  • 查看所有内联编辑器的模型

如果您只想使用内联编辑器，请。将数组元素减小到一。

HTML：

<inline-editor inline-editor-mdl="inlineEditor"></inline-editor>
于 2013-05-07T22:38:50.350 回答
0

小提琴！http://jsfiddle.net/pvtpenguin/25cqs/17

变化：

  1. 创建on-enter指令editable-text在模板中使用的指令。新on-enter指令可以在任何地方重用。

    <input ... on-enter="update()" ... />

  2. 使用ng-click指令来切换showEdit状态，而不是依赖 jquery 和函数。

    <input ... on-click="showEdit = true" ... />

  3. 将指令的隔离范围绑定value到指令的模型属性的值。这让我们可以删除并在本地和scope.$watch本地之间创建双向绑定valueactiveCustomer.phone_number

    <editable-text model="activeCustomer.phone_number"></editable-text>
<input ... ng-model="value" />
<span>{{value}}</span>

...

scope: { 
    // give `value` and `activeCustomer.phone_number two-way binding
    value: '=model' 
}

这些更改完全删除了 jQuery 依赖项。结果指令：

myApp.directive("editableText", function($injector){
  return {
    restrict: "E",
    scope: { 
        value: '=model' // Bind `value` to what is declared on the `model` attribute
    },
    templateUrl: "/tpl.html",
    link: function(scope, elem, attrs){
      scope.update = function() {
          var resource = $injector.get(attrs.resource);
          var params = {};
          params[attrs.field] = scope.value;
          resource.update(params);
          scope.showEdit=false;
      };
      scope.showEdit = false;
    }
  };
});
于 2013-05-07T21:17:12.430 回答