UI引导下拉列表不起作用
UI引导下拉列表不起作用
提问于 2016-03-17 02:33:20
我正在使用UI引导程序，下面是我的代码：
HTML:
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<link href="content/css/bootstrap.min.css" rel="stylesheet" />
<script src="dropdown.js"></script>
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>.js文件：
var app = angular.module("app", ["ui.router"]);
app.controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function (open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
$scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
});下拉列表是可见的，但是下拉列表项在我单击下拉之前就已经显示出来了。即使我点击下拉列表，也不会发生任何事情。是CSS问题吗。我错过了链接任何文件吗？
回答 1
Stack Overflow用户
发布于 2016-03-17 03:13:40
原因是，
ng-app="app"可能在您的HTML文件中丢失。DropDownCtrl不在HTML中使用，尽管它是在dropdown.js文件中定义的。- JS文件中没有使用模块
ui.bootstrap。 ui.router是一个无效的模块。
修改后的工作文件，
工作普朗克尔
http://plnkr.co/edit/TiQrBx9yiU0lTjHhvWRp?p=preview
HTML文件
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<script src="dropdown.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</body>
</html>JS文件
var app = angular.module("app", ['ui.bootstrap']);
app.controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function (open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
$scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36050646
复制相关文章
相似问题
腾讯云开发者
