Question

我正在实施一种就地编辑功能，在用户点击按钮后，这些字段可以编辑。以下是两个指令：

按钮指令：

.directive('editbutton', function() {
   return {
       restrict: 'A',
       template: '<div ng-hide="editorEnabled>' +
          '<button class="btn btn-small" ng-click="enableEditor(item)">' +
             '<i class="icon-edit"></i>' +
          '</button>' +
        '</div>' +
    '<div ng-show="editorEnabled>' +
      '<button class="btn btn-small" ng-click="save(item)">' +
        '<i class="icon-ok"></i>' +
      '</button>' +
    '</div>',
link: function(scope, elm, attrs, ctrl) {
  console.log("butotn");

  scope.editorEnabled = false;

  scope.enableEditor = function(item){
    scope.editorEnabled = true;
  }

  scope.disableEditor = function(){
    scope.editorEnabled = false;
  }

  scope.save = function(){
    // edit client side and server side
    scope.disableEditor();
  }

}
};
});

对于文本编辑：

angular.module('solarquote.directives', []).directive('editfield', function() {
return {
restrict: 'A',
   //scope: { value:"=editfield", inherit:'@editorEnabled'},
   transclude: true,
   template: '<span ng-hide="editorEnabled" ng-transclude></span>' +   // viewable field
     '<span ng-show="editorEnabled"><input class="input-medium" ng-model="value"></span>', // editable field
   link: function(scope, elm, attrs, ctrl) {
       // nothing here
   }
};
})

HTML：

    <tr ng-repeat="item in items">
  <td>
    <a href="" ng-click="filter_fund(item)">
      <span editfield="item.fields.name">{{ item.fields.name }}</span>
    </a>
  </td>

  <td>
    <span editfield="item.fields.address">{{ item.fields.address }}</span>
  </td>

  <td style="text-align:center" ng-show="editable_table"><span editbutton></span></td>

问题是当我实现自己的范围来检索名称时，无法访问editorEnabled范围。我已经尝试使用@和=来获取“继承”范围，但无法弄清楚如何。

目标是使用= editfield预填充输入字段。然后让editorEnabled作用域与启用和禁用它的按钮共享。但是，范围没有编辑器已启用。

任何帮助都将不胜感激。

Answer 1

有两个关键点可以让它发挥作用：

处理隔离范围指令 - 您必须传递所有必需的数据通过属性。在您的示例中，它应该是editfield和 editorEnabled。 E.g：
```
<span editfield="item.fields.name" editor-enabled="editorEnabled">
```
并在指令中：
```
scope: { value:"=editfield", editorEnabled: '='},
```
将数据传递给指令时不要在属性名称中使用camelCase ！

这不起作用：
```
<span editfield="user.name" editorEnabled="editorEnabled">
```

这是工作小提琴：http://jsfiddle.net/wLQH3/1/

另外，您可以在不编写自定义指令的情况下签出完全完成任务的angular-xeditable库。

Answer 2

嗯。我不知道你是否需要为此编写自定义指令。

如果我是你，我的输入字段会ng-disabled，例如：

<button ng-model="clicked"></button>
<input ng-disabled="clicked"/>

无论何时单击按钮，以下内容都会启用/禁用（使其可编辑/不可编辑）输入字段。

使用按钮编辑就地指示

2 个答案: