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>'
};
});