- 首页
- 其他开发
- angular ui bootstrap 无法加载
angular ui bootstrap 无法加载
[英] angular ui bootstrap doesn't load
本文介绍了angular ui bootstrap 无法加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我从示例页面中获取了所有内容.基本上没有什么不同,控制器和 html 正文是来自手风琴示例的纯复制粘贴https://angular-ui.github.io/bootstrap/
我什么都试过了....
<html lang="en" ng-app="app"><头><meta charset="utf-8"><title>测试</title><!-- CSS 文件--><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 库 --><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><!-- 应用程序--><脚本>var app = angular.module('app',['ui.bootstrap']);app.controller('AccordionDemoCtrl', function ($scope) {$scope.oneAtATime = true;$scope.groups = [{title: '动态组头 - 1',内容:'动态组主体 - 1'},{title: '动态组头 - 2',内容:'动态组体 - 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: 真,isFirstDisabled: 假};});头部><身体><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"><spanng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
<div class="panel-collapse collapse" uib-collapse="!isOpen"><div class="panel-body" style="text-align: right" ng-transclude></div>
<p><button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">切换最后一个面板</button><button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = !status.isFirstDisabled">启用/禁用第一个面板</button></p><div class="checkbox"><标签><input type="checkbox" ng-model="oneAtATime">一次只打开一个标签>
<uib-accordion close-others="oneAtATime"><uib-accordion-group Heading="Static Header, 初始展开" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">此内容直接在模板中.</uib-accordion-group><uib-accordion-group Heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</uib-accordion-group><uib-accordion-group Heading="动态正文内容"><p>uib-accordion组的主体生长以适应内容</p><button type="button" class="btn btn-default btn-sm" ng-click="addItem()">添加项目</button><div ng-repeat="item in items">{{item}}</div></uib-accordion-group><uib-accordion-group Heading="自定义模板" template-url="group-template.html">你好</uib-accordion-group><uib-accordion-group Heading="删除账户" panel-class="panel-danger"><p>要删除您的帐户,请单击下面的按钮</p><button class="btn btn-danger">删除</button></uib-accordion-group><uib-accordion-group is-open="status.open"><uib-accordion-heading>我也可以有标记!<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i></uib-accordion-heading>这只是一些说明花哨标题的内容.</uib-accordion-group></uib-手风琴>
```
作为补充,我添加了我的凉亭依赖:
"依赖项": {角度":~1.4.6",角度引导":~0.13.4",角度路线":~1.4.6",引导程序":~3.3.5","jquery": "~2.1.4","lodash": "~3.10.1",角度引导开关":~0.4.1","angularjs-slider": "~0.1.35",角度动画":~1.4.7",角度用户界面通知":~0.0.14"}
解决方案
在 bower.json
中,将 angular-bootstrap
更新到最新:0.14.2
截至今天.
您的示例不起作用,因为您从文档中复制粘贴了代码:此代码对 0.14.x
有效,但您仍在 0.13.x
中.
如果您想使用 0.13.4
版本,则必须删除指令名称中的 uib-
前缀,即:
- 用
accordion
替换uib-accordion
- 将
uib-accordion-group
替换为 accordion-group
- 将
uib-accordion-heading
替换为 accordion-heading
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.:
- Replace
uib-accordion
with accordion
- Replace
uib-accordion-group
with accordion-group
- Replace
uib-accordion-heading
with accordion-heading
这篇关于angular ui bootstrap 无法加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!