6

奇妙な理由により、ブートストラップ メニューのドロップダウンがルーター テンプレートを使用して構築されている場合、クリックしても展開されません。テンプレートで直接使用すると、正常に機能します。

遊ぶプランカーは次のとおりです。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

実際には、ルートの変更をトリガーする dropdown-toggle-link の href 属性の「#」です。href を削除すると動作します: http://plnkr.co/edit/aDLuAk0mBLO6R1LR6ASb?p=preview

しかし、私が言ったように、角度とブートストラップをこのように組み合わせることはお勧めしません。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 に答える