Question

我有一个自定义指令 - 让我们称之为tableDisplay。我希望能够根据属性显示/隐藏列（我们将其称为show-edit-column，我已经工作了）但我也希望能够在每一行上确定是否给定的行是可编辑的。我想通过传入另一个属性（allow-edit-row-condition）来做到这一点，该属性告诉每一行应该使用的条件语句来确定它是否可编辑。

如下所示。

<table-display show-edit-column="true" allow-edit-row-condition="row.value === 'OK'">

我只是不知道如何传递row.value ===＆＃39; OK＆＃39;以某种方式可以在每一行上使用。有什么想法/建议吗？

Answer 1

传递功能。

在您的父作用域定义

上

$scope.isEditAllowedForRow = function (row) {
   return (row.value === 'OK');
};

声明为单向绑定的指令范围参数：

...
allowEditRowCondition: '&'
...

并将其用作

<table-display show-edit-column="true"
               allow-edit-row-condition="isEditAllowedForRow(row)">

现在，在您的指令模板中，您可以将条件用作

allowEditRowCondition({row: row})

e.g。

<tr ng-show="allowEditRowCondition({row: row})">

在Javascript中总是考虑功能。

Answer 2

我理解这个问题。您正在尝试传递可在内部ng-repeat的上下文中评估的条件的文本表达式。我可能会反对这一点，因为现在您的客户必须了解您的内部指令结构，因为row在父范围（即指令的消费者）中毫无意义。

但如果你坚持......

您需要在每行的上下文中插入此表达式。因此，将表达式解析为要在内部作用域上公开的函数。您可以在链接功能中执行此操作：

link: function(scope, elem, attrs){
  // get the condition as string
  var cond = attrs["condition"];

  // parse to create a function
  var matcher = $parse(cond);

  scope.matchRow = function(row){
    // evaluate the function in the context of the row
    return matcher({row: row});
  };

然后，在您的视图中，您可以根据以下条件进行过滤：

<tr ng-repeat="row in src | filter:matchRow">
  <td ng-repeat="col in row">{{col}}</td>
</tr>

或者，执行一些条件渲染（可编辑与非编辑）：

<tr ng-repeat="row in src">
  <td ng-repeat="col in row">
    <input ng-disabled="!matchRow(row)" ng-model="col" class="form-control">
  </td>
</tr>

这里有plunker来说明

AngularJS - 将条件传递给指令

2 个答案: