时间戳

首页 > 解决方案 > 导航栏下拉菜单不适用于 Angular 1.6.1 和 Bootstrap 4

html - 导航栏下拉菜单不适用于 Angular 1.6.1 和 Bootstrap 4

问题描述

我正在使用 Angular 1.6.1 和 Bootstrap 4 开发一个 Web 应用程序，但我遇到了导航菜单栏下拉菜单的问题。但我不知道为什么下拉菜单不起作用！

主页.html

 <!doctype html>
    <html ng-app="App">
    <head>
        <link rel="stylesheet" href="../css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="../css/style.css">
        <script src="../js/ui-bootstrap-tpls-3.0.6.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="../js/script.js"></script>
    </head>
    <body>
    <div id="header">
        <div ng-include="'../view/navbar.html'"></div>
    </div>
    <div>
        <label>Name:</label>
        <input type="text" ng-model="yourName" placeholder="Enter a name here">
        <hr>
        <h1>Hello {{yourName}}!</h1>
    </div>

    </body>
    </html>

导航栏.html

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" ><span class="brand"><h4>Test Data Identifier</h4></span></a>
    <!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>-->
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button"  data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
                    Subscription
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    Agreement
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
                    <li class="dropdown-item"><a class="nav-link">l11</a></li>
                    <li class="dropdown-item"><a class="nav-link">l22</a></li>
                    <li class="dropdown-item"><a class="nav-link">l333</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

脚本.js

var app = angular.module('App', ['ui.bootstrap']);

我究竟做错了什么？

我已经添加了所有必需的库..

标签： htmlcssangularjsangular-ui-bootstrapangularjs-3rd-party

解决方案

推荐阅读