javascript - Angularjs UI 在 ngRepeat 中崩溃

Question

我正在尝试在 ngRepeat 中嵌入一些可折叠面板。 这是我的:

<div class="panel panel-default" ng-repeat="element in elements">
 <div class="panel-heading">
  {{element.name}}
  <button value="Collapse" ng-click="element.isCollapsed != element.isCollapsed"></button>
 </div>
 <div class="panel-body" collapse="element.isCollapsed">
  Content
 </div>
</div>

现在，当我点击按钮时，折叠不起作用。

从文档中我了解到转发器为每个元素创建了一个范围。

和 panel-body 的属性 collapse 应该得到相同的作用域，对吧？

看来 collapse 指令中的 scope.$watch 没有正常工作。

Answer 1

请检查更新的 fiddle :http://jsfiddle.net/nZ9Nx/9/

我已经创建了该应用程序并在其中注入(inject)了 ui-bootstrap 以使折叠正常工作。

angular.module('test', ['ui.bootstrap']);