更改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';
}