导航栏中的下拉列表不会展开（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 以下是玩家：... 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>

Answer 1

Its actually the '#' of the href attribute of the dropdown-toggle-link which triggers a route change. 它实际上是dropdown-toggle-link的href属性的'＃'，它触发路由更改。 If you remove href it works: http://plnkr.co/edit/aDLuAk0mBLO6R1LR6ASb?p=preview 如果删除href它可以工作： 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. 在混合功能时，UI-bootstrap通常是更好的选择。

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

导航栏中的下拉列表不会展开（bootstrap，angular，directives，routes）

问题描述

1 个解决方案

解决方案1
7 已采纳 2013-11-14 00:09:05

导航栏中的下拉列表不会展开（bootstrap，angular，directives，routes）

问题描述

1 个解决方案

解决方案1 7 已采纳 2013-11-14 00:09:05

解决方案1
7 已采纳 2013-11-14 00:09:05