admin管理员组文章数量:1316980
For some strange reason the bootstrap menu dropdown is not expanded on click when it is constructed through router template. Being used directly in the template it works fine.
Here is the plunker to play with:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>TEST</title>
<script src=".0.3/jquery.min.js"></script>
<link rel="stylesheet" href=".0.2/css/bootstrap.min.css">
<link rel="stylesheet" href=".0.2/css/bootstrap-theme.min.css">
<script src=".0.2/js/bootstrap.min.js"></script>
<script src=".2.0/angular.min.js"></script>
<script src=".2.0/angular-route.min.js"></script>
<script>
var app = angular.module('app', [ 'ngRoute', 'ctrls' ]);
app.config(function ($routeProvider) {
$routeProvider.when('/menu', {
template : '<menu></menu>',
controller : 'mainCtrl'
}).otherwise({ redirectTo: '/menu' });
});
app.directive('menu', function () {
return {
restrict : 'E',
template : '<nav class="navbar navbar-default" role="navigation">' +
'<ul class="nav navbar-nav">' +
' <li class="dropdown">' +
' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>' +
' <ul class="dropdown-menu"><li><a href="#">Action</a></li></ul>' +
' </li>' +
'</ul>' +
'</div>' +
'</nav>'
};
});
angular.module('ctrls', [ ]).controller('mainCtrl', function () { });
</script>
</head>
<!-- this menu does not work -->
<body ng-view></body>
<!-- this menu works fine: -->
<!-- <body><menu></menu></body> -->
</html>
For some strange reason the bootstrap menu dropdown is not expanded on click when it is constructed through router template. Being used directly in the template it works fine.
Here is the plunker to play with: http://plnkr.co/edit/GOky2ajHl46VddQRKDye?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>TEST</title>
<script src="http://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn./bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn./bootstrap/3.0.2/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn./bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>
<script>
var app = angular.module('app', [ 'ngRoute', 'ctrls' ]);
app.config(function ($routeProvider) {
$routeProvider.when('/menu', {
template : '<menu></menu>',
controller : 'mainCtrl'
}).otherwise({ redirectTo: '/menu' });
});
app.directive('menu', function () {
return {
restrict : 'E',
template : '<nav class="navbar navbar-default" role="navigation">' +
'<ul class="nav navbar-nav">' +
' <li class="dropdown">' +
' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>' +
' <ul class="dropdown-menu"><li><a href="#">Action</a></li></ul>' +
' </li>' +
'</ul>' +
'</div>' +
'</nav>'
};
});
angular.module('ctrls', [ ]).controller('mainCtrl', function () { });
</script>
</head>
<!-- this menu does not work -->
<body ng-view></body>
<!-- this menu works fine: -->
<!-- <body><menu></menu></body> -->
</html>
- Just a guess, but i suspect that the bootstrap js just gets applied once on load and the directive is only attached afterwards. If you mix bootstrap with angular, i would remend you to use to use ui-bootstrap: angular-ui.github.io/bootstrap its not ready yet for bootstrap 3, but in most of the cases you're fine, if you adjust the templates it provides. – hugo der hungrige Commented Nov 13, 2013 at 23:30
- Dropdown.prototype.toggle runs when the link is clicked both times - so the events are attached correctly – Alex Netkachov Commented Nov 13, 2013 at 23:35
- Can you provide a fiddle or plunker? – hugo der hungrige Commented Nov 13, 2013 at 23:36
- Here it is: plnkr.co/edit/GOky2ajHl46VddQRKDye?p=preview – Alex Netkachov Commented Nov 13, 2013 at 23:41
1 Answer
Reset to default 7Its actually the '#' of the href attribute of the dropdown-toggle-link which triggers a route change. If you remove href it works: http://plnkr.co/edit/aDLuAk0mBLO6R1LR6ASb?p=preview
But as I said: I wouldn't remend bining angular and bootstrap in this fashion. UI- bootstrap is usually the better choice when mixing their functionality.
app.directive('menu', function () {
return {
restrict : 'E',
template : '<nav class="navbar navbar-default" role="navigation">' +
'<ul class="nav navbar-nav">' +
' <li class="dropdown">' +
// remove href = '#' here
' <a href class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>' +
// probably not the worst idea to remove it here either, if not used otherwise
' <ul class="dropdown-menu"><li><a href="#">Action</a></li></ul>' +
' </li>' +
'</ul>' +
'</div>' +
'</nav>'
};
});
本文标签：
版权声明：本文标题：javascript - dropdown in navigation bar does not expand (bootstrap, angular, directives, routes) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742012787a2413204.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论