javascript - 使用 ui.bootstrap 显示部分内容

Question

我的 Angular.js 应用程序中有一排按钮当前打开了一条新路线，在页面上显示了一个新的局部 View 。我的新任务是让其中一些按钮触发 ui.bootstrap Collapse 和其中的 View 。来自 ui.bootstrap 示例的标记是:

<div ng-controller="CollapseDemoCtrl">
    <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
    <hr>
    <div uib-collapse="isCollapsed">
        <div class="well well-lg">Some content</div>
    </div>
</div>

angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
  $scope.isCollapsed = false;
});

我想要显示我的部分内容之一，其中“某些内容”位于上面的标记内。因此，我会有这样的按钮:

派对 | future 事件

当我点击 Parties 时，它当前通过路径/parties/:number 加载各方，其中 :number 是要查看的案例编号。

我想将其更改为相同的按钮，但是当我单击“派对”时，它会滑动打开包含派对的 DIV。我面临的一个挑战是各方是通过单独的网络服务检索的，我不确定如何构建我的页面以将这些隐藏在某个地方。是否可以在请求时加载它们？

我如何完成这个任务？最终我将需要使用从我的各种按钮触发的多个折叠语句。这是因为我在这个页面上有多行数据。有可能吗？

Answer 1

您可以将您的部分注入(inject)折叠面板中。这种方法非常简单且易于管理。 Controller 将负责加载哪个部分以及何时加载。

看看这个plunker .

在上面的示例中，我使用了一个简单的 getter 函数来获取部分并将其加载到我的面板中:

<div uib-collapse="Main.isCollapsed">
    <div class="well well-lg">
        <div ng-include="Main.getPartialUrl()"></div>
    </div>
</div>