导航栏中的下拉菜单无法展开（Bootstrap、Angular、指令、路由）。

Question

导航栏中的下拉菜单无法展开（Bootstrap、Angular、指令、路由）。

javascriptangularjstwitter-bootstraptwitter-bootstrap-3

6

由于一些奇怪的原因，当通过路由器模板构建时，Bootstrap菜单下拉框在单击时未展开。如果直接在模板中使用，则正常工作。

这里是可以尝试的Plunker链接：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>

- Alex Netkachov

只是猜测，但我怀疑bootstrap js只在加载时应用一次，指令只在之后附加。如果您混合使用angular和bootstrap，则建议使用ui-bootstrap：http://angular-ui.github.io/bootstrap/，它尚未准备好支持Bootstrap 3，但在大多数情况下，如果您调整提供的模板，则可以正常使用。 - hugo der hungrige

Dropdown.prototype.toggle 在链接被点击两次时运行 - 因此事件已正确附加。 - Alex Netkachov

你能提供一个 Fiddle 或 Plunker 吗？ - hugo der hungrige

这是它的链接：http://plnkr.co/edit/GOky2ajHl46VddQRKDye?p=preview - Alex Netkachov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hugo der hungrige · Accepted Answer

实际上，下拉菜单切换链接的href属性中的'#'触发了路由更改。如果您删除href，则可以正常工作：http://plnkr.co/edit/aDLuAk0mBLO6R1LR6ASb?p=preview 但是，如我所说：我不建议以这种方式组合angular和bootstrap。在混合它们的功能时，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>'
    };
});