更改ng-repeat内部呈现的ng-include模板

Question

我有一个ng-repeat，其中每个实例都包含一个ng-include 。 像这样：

<li ng-repeat="item in items">
    <div class="item-actions" ng-include="actionsTemplate"></div>
</li>

现在，我希望能够通过单击同一作用域中的按钮来设置和删除actionsTemplate源，如下所示：

<li ng-repeat="item in items">
    <div class="item-actions" ng-include="actionsTemplate"></div>
    <button ng-click="toggleActionsTemplate()">Toggle Actions</button>
</li>

所以点击按钮会触发一个功能toggleActionsTemplate()所设置的actionsTemplate源foo ，或者如果它已经设置为foo ，将其设置为null以除去模板。

我已经尝试过这样做，但无法弄清楚如何获得一个控制器函数来定位从其调用该函数的同一ng-repeat实例内的模板。

这是否可能，更重要的是，这是实现这一行为的好方法吗？

Answer 1

这是一个小矮人： http ://plnkr.co/edit/4p56QeuqpMAH1yc0tbfy?p=preview

• 您需要为ngRepeat每个子作用域初始化一个不同的actionsTemplate变量。
• 您可以使用ngInit初始化作用域变量。

一个例子：

<li ng-repeat="item in items" ng-init="action = actionsTemplate">
    <div class="item-actions" ng-include="action"></div>
    <button ng-click="action = toggleAction(action)">Toggle Actions</button>
</li>

控制器：

$scope.toggleAction= function(action){
  return action === 'foo' ? null : 'foo';
}