angularjs – Angular UI – Bootstrap Accordion not working /

发布时间：2020-12-17 09:04:18 所属栏目：安全来源：网络整理

导读：我对手风琴有问题：我尝试做的几乎和demo显示的一样,我有一个对象数组.每个对象都包含一个字符串,即标题标题.它还包含一个字符串,它是另一个HTML-File的相对路径,它应该是accordion-group的内容. $scope.groups = [{ groupTitle: "Title1",templateUrl: "si

我对手风琴有问题：

我尝试做的几乎和demo显示的一样,我有一个对象数组.每个对象都包含一个字符串,即标题标题.它还包含一个字符串,它是另一个HTML-File的相对路径,它应该是accordion-group的内容.

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

此代码位于名为AccordionController的控制器中.
在我的HTML中,我在控制器中有这个代码

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

ng-include和那些东西都有效,但是这些组基本上没有对点击做出反应然后打开或关闭,我也尝试添加is-open指令.使用参数我指向一个布尔数组,它更改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在加载时不是控制台中的函数.

我将不胜感激任何帮助！

我得到了解决方案：

首先,命名控制器AccordionController会产生与angular ui bootstrap的冲突 – 内部控制器的命名方式如此.

我不确定这是否是最佳解决方案,但它对我来说效果很好.

这是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);
    }
}]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!