angularjs - 使用注入属性在指令中封装 html 夹头的最佳方法

Question

<div ng-repeat="post in posts">
  <a e-form="review_link" ng-click="review_link.$show()" editable-text="post.review_link" buttons="no" blur="submit" e-placeholder="Leave blank to use default value">{{ post.url }}</a>
  <a e-form="title" ng-click="title.$show()" editable-text="post.title" buttons="no" blur="submit" e-placeholder="Leave blank to use default value">{{ post.title }}</a>
  <a e-form="author" ng-click="author.$show()" editable-text="post.author" buttons="no" blur="submit" e-placeholder="Leave blank to use default value">{{ post.author }}</a>
  <!-- other different widgets -->
</div>

我试图做类似的事情：

<div ng-repeat="post in posts">
  <custom-directive field="field" ng-repeat="field in ['review_link', 'title', 'author']"></custom-directive>
  <!-- other different widgets -->
</div>

并在指令上：

app.directive('customDirective', function() {
  return {
    restrict: 'E',
    scope: {
      field: '='
    },
    template: '<a e-form="{{field}}" ng-click="{{field}}.$show()" editable-text="post[{{field}}]" buttons="no" blur="submit" e-placeholder="Leave blank to use default value">{{ post.author }}</a>' 
  }
}

但我得到了编译语法错误

PD：我在示例中使用http://vitalets.github.io/angular-xeditable/#overview。

Answer 1

引起的语法错误ng-click="{{field}}.$show()"。

将其更改为 ng-click="field.$show()". 你不需要里面的花括号ng-repeat

此外，您似乎正在尝试post从指令的模板进行访问（这不起作用，因为它不与指令共享 - 范围是孤立的）。

该怎么办？post像这样添加scope：

scope: {
  field: '=',
  post: '='
},

就像你做的那样，将它添加到你的指令field：

<custom-directive field="field" post="post" ...

示例：http ://plnkr.co/edit/szDjDw3bnLtDSRr2O08H?p=preview