将参数传递给Angularjs指令模板ng-if

Question

PLUNKR

是否可以将参数传递给ng-if？

中的指令模板

的index.html：

<my-directive showName="John"></my-directive>

template.html：

<h1 ng-repeat="customer in customers" ng-if="customer.name === showName ">
  {{customer.name}} is {{customer.age}}
</h1>

理想情况下，上述示例仅显示John的数据。 也许这不是正确的方法吗？ 因为当我在指令中使用scope: { showName = '@' }时，ng-repeat似乎不再起作用了吗？

Answer 1

使用后

scope: {
   showName:'='
}

发生了两件事：

1. 该指令的参数定义为名称show-name。不是showName。

2. 指令范围被隔离。这意味着它将失去对父作用域中定义的customers的访问权限。您还必须在参数中传递它们。

此外，您应该在ng-if上使用过滤器，而不是使用ng-repeat和ng-repeat。否则，您将遇到优先级问题（ng-if之前执行ng-repeat）。

Answer 2

您应该使用过滤器。

要使其正常工作，您必须更改模板中的表达式：

<h1 ng-repeat="customer in customers | filter:{name: showName}">
  {{customer.name}} is {{customer.age}}
</h1>

这将仅过滤匹配的名称属性。

要拥有隔离范围，应将属性绑定到指令中的本地范围变量：

scope: {
  customers: '=', //two way binding of the object
  showName: '@'   //string evaluation
}

但是由于你有一个孤立的范围，你还应该像这样添加属性客户：

<my-directive show-name="John" customers="customers"></my-directive>

这是工作plunkr

如果需要，您还可以更进一步，将您的show-name绑定到输入字段：

<input ng-model="search" />
<my-directive customers="customers" show-name="search"></my-directive>

因此您必须将绑定更改为双向绑定：

scope: {
   customers: '=',
   showName: '='
}