angularjs - Angular UI - Bootstrap Accordion 不工作/动态 ng-include

Question

我对 Accordion 有疑问:

我尝试做与 demo 几乎相同的事情显示，我有一个 对象数组 .每个对象都包含一个字符串，即标题 标题 .它还包含一个字符串，它是相对的 路径 到另一个 HTML 文件，它应该是 Accordion 组的内容。

$scope.groups = [{
    groupTitle: "Title1",
    templateUrl: "sites/file1.html"
}, {
    groupTitle: "Title2",
    templateUrl: "sites/file2.html"
}];

此代码位于名为 AccordionController 的 Controller 中.
在我的 HTML 中，我的 Controller 中有这段代码

<accordion>
    <accordion-group ng-repeat="group in groups" heading="{{group.groupTitle}}">
        <div ng-include="group.templateUrl"></div>
    </accordion-group>
</accordion>

ng-include 和那个东西有效，但是这些组基本上不会对点击使用react然后打开或关闭，我还尝试添加 is-open指示。我用参数指向一个 bool 数组，它改变了 ng-click 上的特定值

烦人的事情——我真的不明白——这一切都有效 here in Plunker

我也链接了

<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css" />
<script type="text/javascript" src="scripts/angular.js"></script>
<script type="text/javascript" src="scripts/ui-bootstrap-tpls-0.12.0.js"></script>

并添加了 bootstrap.ui到我的模块。

我收到错误消息: TypeError: undefined is not a function当我加载它时在控制台中。

我将不胜感激任何帮助!

Answer 1

我得到了解决方案:

首先，命名 Controller AccordionController创建 冲突 使用 angular ui bootstrap - 内部 Controller 的名称是这样的。

我不确定这是否是最好的解决方案，但它对我来说很好。

这是HTML:

<div ng-controller="AccordionCtrl">
    <accordion class="accordion" close-others="oneAtATime">
        <accordion-group  ng-repeat="group in groups" is-open="status.isOpen[$index]" >
            <accordion-heading>
                {{group.groupTitle}} <i class="fa chevron-icon" ng-class="{'fa-chevron-down': status.isOpen[$index], 'fa-chevron-right': !status.isOpen[$index]}"></i>
            </accordion-heading>
            <div ng-include="group.templateUrl"></div>
        </accordion-group>
    </accordion>
</div>

当然还有 JS:

settings.controller('AccordionCtrl', ['$scope',
function ($scope) {
    $scope.oneAtATime = false;

    $scope.groups = [{
        groupTitle: "Test1",
        templateUrl: "file1.html"
    }, {
        groupTitle: "Test2",
        templateUrl: "file2.html"
    }, {
        groupTitle: "Test3",
        templateUrl: "file3.html"
    }];

    $scope.status = {
        isOpen: new Array($scope.groups.length)
    };

    for (var i = 0; i < $scope.status.isOpen.length; i++) {
        $scope.status.isOpen[i] = (i === 0);
    }
}]);