Angular UI - Bootstrap 手风琴不是 working/dynamic ng-include
Angular UI - Bootstrap Accordion not working/dynamic ng-include
我的手风琴有问题:
我尝试做与 demo 显示的几乎相同的事情,我有一个 objects 数组。每个 object 包含一个字符串,即 header title。它还包含一个字符串,它是 路径 到另一个 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
添加到我的模块。
我在加载时在控制台中得到 error-message: TypeError: undefined is not a function
。
如有任何帮助,我将不胜感激!
分叉你的 plnkr 。已加载模板文件
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>
我得到了解决方案:
首先,将控制器命名为 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);
}
}]);
实际上,可能有更简单的解决方案。
您只需确保链接不会传播 URL 更改。
添加到a标签onclick="return false;"
来源:click here
我的手风琴有问题:
我尝试做与 demo 显示的几乎相同的事情,我有一个 objects 数组。每个 object 包含一个字符串,即 header title。它还包含一个字符串,它是 路径 到另一个 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
添加到我的模块。
我在加载时在控制台中得到 error-message: TypeError: undefined is not a function
。
如有任何帮助,我将不胜感激!
分叉你的 plnkr 。已加载模板文件
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>
我得到了解决方案:
首先,将控制器命名为 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);
}
}]);
实际上,可能有更简单的解决方案。
您只需确保链接不会传播 URL 更改。
添加到a标签onclick="return false;"
来源:click here