All geek questions in one place

The drop-down list in the navigation bar does not expand (bootstrap, angular, directives, routes)

For some strange reason, the bootstrap popup menu does not expand when clicked when it is built using the router template. Used directly in the template, it works great.

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>
+6
source share
1 answer

In fact, this is the "#" attribute of the href of the drag-and-drop link that triggers a route change. If you remove href, it works: http://plnkr.co/edit/aDLuAk0mBLO6R1LR6ASb?p=preview

But, as I said: I would not recommend combining angular and bootstrap this way. UI-bootstrap is usually the best 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>' }; });
+7
source

Source: https://habr.com/ru/post/958031/

More articles:


All Articles