Menu
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>
366
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>'
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
