dropdown in navigation bar does not expand (bootstrap, angular, directives, routes)
Question
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.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/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>
1 answers
solution1
7 ACCPTED 2013-11-14 00:09:05
Its 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 recommend combining 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>'
};
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.