角UI -启动手风琴不工作/动态ng-包括
角UI -启动手风琴不工作/动态ng-包括
提问于 2015-01-06 09:04:57
我对手风琴有意见：
我试图做的和演示显示的差不多，我有一个数组对象。每个对象都包含一个字符串，它是头标题。它还包含一个字符串，它是另一个HTML的相对路径，它应该是手风琴组的内容。
$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上的特定值
令人讨厌的是--我真的不明白--这一切都是有效的在这里的柱塞
我也把
<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。
我很感激你的帮助！
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-01-06 11:33:19
我找到了解决办法：
首先，将一个控制器命名为AccordionController会用角度ui引导来创建冲突--内部控制器的名称如下。
我不确定这是否是最好的解决方案，但对我来说很好。
下面是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>当然，联合来文：
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);
}
}]);Stack Overflow用户
发布于 2015-01-06 09:11:34
分叉了你的普朗克。加载模板文件
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1',
templateUrl: 'file1.html'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2',
templateUrl: 'file2.html'
}
];
});
<div ng-controller="AccordionDemoCtrl">
<accordion>
<accordion-group ng-repeat="group in groups" heading="{{group.title}}">
<div ng-include="group.templateUrl"></div>
</accordion-group>
</accordion>
</div>Stack Overflow用户
发布于 2016-01-15 11:34:55
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27795283
复制相关文章
相似问题
腾讯云开发者
