我把一切都要从示例页面。基本上没有什么不同,控制器和HTML的身体是从手风琴例如纯粹的复制粘贴 https://angular-ui.github.io/bootstrap/
我什么都试过....
<!DOCTYPE HTML>< HTML LANG =ENNG-应用=应用程序> < HEAD> <间的charset =UTF-8> <标题>测试与LT; /标题><! - CSS文件 - ><链接rel =stylesheet属性HREF =../../ bower_components /引导/距离/ CSS / bootstrap.min.css><链接rel =stylesheet属性HREF =../../ bower_components /引导/距离/ CSS /引导-theme.min.css><! - JS库 - ><脚本SRC =../../ bower_components /角/ angular.min.js>< / SCRIPT><脚本SRC =../../ bower_components /角引导/ UI的引导-tpls.min.js>< / SCRIPT><脚本SRC =../../ bower_components /角动画/角animate.min.js>< / SCRIPT>&所述;! - 应用 - ><脚本>VAR应用= angular.module('应用',['ui.bootstrap']);app.controller('AccordionDemoCtrl',函数($范围){ $ scope.oneAtATime =真; $ scope.groups = [ { 标题:动态组头 - 1, 内容:动态组身体 - 1' }, { 标题:动态组头 - 2', 内容:动态组身体 - 2' } ]; $ scope.items = ['项目1,项目2,3项']; $ scope.addItem =功能(){ 变种newItemNo = $ scope.items.length + 1; $ scope.items.push('项目'+ newItemNo); }; $ scope.status = { isFirstOpen:真实, isFirstDisabled:假的 };}); < / SCRIPT> < /头> <身体GT;< DIV NG控制器=AccordionDemoCtrl> <脚本类型=文/ NG-模板ID =组template.html> < DIV CLASS =面板{{panelClass ||'面板默认'}}> < DIV CLASS =面板标题> < H4类=面板标题的风格=COLOR:#fa39c3> < A HREF的tabindex =0级=的手风琴切换NG点击=toggleOpen()UIB-手风琴transclude =标题><跨度 NG-CLASS ={'文本静音:isDisabled}> {{标题}}< / SPAN>< / A> < / H4> < / DIV> < DIV CLASS =面板垮垮UIB崩溃=isOpen会!> < DIV CLASS =面板体的风格=文本对齐:右NG-transclude>< / DIV> < / DIV> < / DIV> < / SCRIPT> &所述p为H.; <按钮式=按钮级=BTN BTN-默认BTN-SMNG点击=status.open = status.open!>最后切换面板< /按钮> <按钮式=按钮级=BTN BTN-默认BTN-SMNG点击=status.isFirstDisabled = status.isFirstDisabled!>启用/禁用第一个面板和LT; /按钮> &所述; / P> < DIV CLASS =复选框> <标签> <输入类型=复选框NG模型=oneAtATime> 打开在同一时间只有一个 < /标签> < / DIV> < UIB-手风琴近距离他人=oneAtATime> < UIB-手风琴组标题=静态头,开始扩大是开=status.isFirstOpen是禁用=status.isFirstDisabled> 此内容是直的模板。 < / UIB-手风琴组> < UIB-手风琴组标题={{group.title}}NG重复=组群> {{group.content}} < / UIB-手风琴组> < UIB-手风琴组标题=动态正文内容> &所述; P>将UIB-手风琴组的主体生长至适合的内容与所述; / P> <按钮式=按钮级=BTN BTN-默认BTN-SMNG点击=的addItem()>添加项目< /按钮> < DIV NG重复=项中的项目> {{}项}< / DIV> < / UIB-手风琴组> < UIB-手风琴组标题=自定义模板模板URL =组template.html> 你好 < / UIB-手风琴组> < UIB-手风琴组标题=删除账户面板类=面板危险> < P>请,删除自己的帐户,请点击下面的按钮< / P> <按钮类=BTN BTN-危险>删除< /按钮> < / UIB-手风琴组> < UIB-手风琴组开=status.open> < UIB-手风琴标题> 我可以有标记,太! < I类=右拉glyphiconNG-CLASS ={'glyphicon雪佛龙下:status.open,glyphicon - 雪佛龙权!status.open}>< / I> < / UIB-手风琴标题> 这仅仅是一些内容来说明花哨的标题。 < / UIB-手风琴组> < / UIB-手风琴>< / DIV>
```
在补充添加我的亭子依赖性:
依赖:{角度:〜1.4.6,角自举:〜0.13.4角路线:〜1.4.6引导:〜3.3.5jQuery的:〜2.1.4lodash:〜3.10.1,角引导开关:〜0.4.1angularjs滑块:〜0.1.35角动画:〜1.4.7,角UI的通知:〜0.0.14 }
解决方案
在 bower.json
,更新角引导
最新: 0.14.2
作为当今
您的例子不工作,因为你复制粘贴在文档中的code:此code有效期为 0.14.x
,但你仍然在 0.13.x
。
如果你想继续使用版本 0.13.4
,你将不得不删除 UIB -
$ P在指令的名称$ PFIX,即:
UIB-手风琴
与手风琴
替换 UIB-手风琴组
与手风琴组
替换 UIB-手风琴标题
与手风琴标题
I take everything from the example page. basically there is nothing different, controller and html body is pure copy paste from accordion example from https://angular-ui.github.io/bootstrap/
I tried everything....
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- CSS files -->
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<!-- JS libs -->
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>
<!-- Application -->
<script>
var app = angular.module('app',['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function() {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
});
</script>
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
<button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
</p>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="oneAtATime">
Open only one at a time
</label>
</div>
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</uib-accordion-group>
<uib-accordion-group heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</uib-accordion-group>
<uib-accordion-group heading="Custom template" template-url="group-template.html">
Hello
</uib-accordion-group>
<uib-accordion-group heading="Delete account" panel-class="panel-danger">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</uib-accordion-group>
<uib-accordion-group is-open="status.open">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</uib-accordion-group>
</uib-accordion>
</div>
```
in complement I add my bower dependency:
"dependencies": {
"angular": "~1.4.6",
"angular-bootstrap": "~0.13.4",
"angular-route": "~1.4.6",
"bootstrap": "~3.3.5",
"jquery": "~2.1.4",
"lodash": "~3.10.1",
"angular-bootstrap-switch": "~0.4.1",
"angularjs-slider": "~0.1.35",
"angular-animate": "~1.4.7",
"angular-ui-notification": "~0.0.14"
}
解决方案
In bower.json
, update angular-bootstrap
to the latest: 0.14.2
as of today.
Your example doesn't work because you copy pasted the code from the documentation: this code is valid for 0.14.x
but you are still in 0.13.x
.
If you want to stay with version 0.13.4
, you will have to remove the uib-
prefix in the name of the directives, i.e.:
uib-accordion
with accordion
Replace uib-accordion-group
with accordion-group
Replace uib-accordion-heading
with accordion-heading