6

由于某些奇怪的原因，引导菜单下拉菜单在通过路由器模板构建时不会在单击时展开。直接在模板中使用它工作正常。

这是可以玩的 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>
4

1 回答 1

7

它实际上是触发路由更改的下拉切换链接的 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>'
    };
});
于 2013-11-14T00:09:05.920 回答