bootstrap navbar menu下拉列表不起作用

Question

我有yeoman angular-fullstack生成的MEAN应用程序，我一直在尝试修改。我想在导航栏中添加一个标签，点击后会在下拉列表中显示其他项目。

这样的事情：

http://getbootstrap.com/examples/navbar/

以下是 navbar.html 文件：

<div class="navbar navbar-default navbar-fixed-top" ng-controller="NavbarController">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand"><b>Cassmon</b></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div  class="navbar-collapse collapse" id="navbar-main">
      <ul class="nav navbar-nav">
        <li ng-repeat="item in nav.menu" ng-class="{active: nav.isActive(item.link)}">
            <a ng-href="{{item.link}}">{{item.title}}</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" ng-click="nav.toggleCollpase()" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Metric Browser<span class="caret"></span></a>
          <ul class="dropdown-menu" collapse="nav.isCollapsed()">
            <li><a href="#">Latency</a> </li>
            <li><a href="#">Performance</a> </li>
            <li><a href="#">Execution</a> </li>
            <li><a href="#">All</a> </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

这是我的 navbar.controller.ts 文件：

'use strict';

class NavbarController {
  //start-non-standard
  menu = [{
    'title': 'Home',
    'link': '/'
  },{
    'title': 'Dropdown',
    'link' : '/dropdown'
  }];

  $location;
  Auth;
  isAdmin;
  getCurrentUser;
  isLoggedIn;
  isCollapsed = false;
  //end-non-standard

  constructor($location, Auth) {
    this.$location = $location;
    this.isLoggedIn = Auth.isLoggedIn;
    this.isAdmin = Auth.isAdmin;
    this.getCurrentUser = Auth.getCurrentUser;
  }

  isActive(route) {
    return route === this.$location.path();
  }

  isCollapsed() {
    return this.isCollapsed;
  }

  toggleCollpase() {
    if (this.isCollapsed) {
      this.isCollapsed = false;
    } else {
      this.isCollapsed = true;
    }
  }
}

angular.module('cassmonApp')
  .controller('NavbarController', NavbarController);

当我构建应用程序时，我得到了这个页面但是当我点击“向下”按钮时，我看不到菜单出现。任何帮助将不胜感激。

以下是我的包文件：

bower.json

{
  "name": "XXXXXXXX",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.5.0",
    "json3": "~3.3.1",
    "es5-shim": "~3.0.1",
    "bootstrap": "~3.1.1",
    "bootstrap-social": "~4.9.1",
    "angular-resource": "~1.5.0",
    "angular-cookies": "~1.5.0",
    "angular-sanitize": "~1.5.0",
    "angular-route": "~1.5.0",
    "angular-bootstrap": "~1.1.2",
    "font-awesome": ">=4.1.0",
    "lodash": "~2.4.1",
    "angular-socket-io": "~0.7.0",
    "angular-validation-match": "~1.5.2",
    "bootstrap-side-navbar": "^1.0.1",
    "angular-datatables": "^0.5.4",
    "angular-daterangepicker": "^0.2.2",
    "angular-material": "^1.1.0",
    "angular-messages": "^1.5.8",
    "angular-chart.js": "^1.0.3"
  },
  "devDependencies": {
    "angular-mocks": "~1.5.0"
  }
}

的package.json

{
  "name": "XXXXXXXX",
  "version": "0.0.0",
  "main": "server/app.js",
  "dependencies": {
    "babel-polyfill": "^6.7.2",
    "babel-runtime": "^6.6.1",
    "bluebird": "^3.3.3",
    "body-parser": "^1.13.3",
    "composable-middleware": "^0.3.0",
    "compression": "^1.5.2",
    "connect-mongo": "^1.2.1",
    "cookie-parser": "^1.3.5",
    "dateformat": "^1.0.12",
    "ejs": "^2.3.3",
    "errorhandler": "^1.4.2",
    "express": "^4.13.3",
    "express-jwt": "^3.0.0",
    "express-session": "^1.11.3",
    "jsonwebtoken": "^7.0.0",
    "lodash": "^4.6.1",
    "lusca": "^1.3.0",
    "method-override": "^2.3.5",
    "mongoose": "^4.1.2",
    "morgan": "~1.7.0",
    "passport": "~0.3.0",
    "passport-google-oauth20": "^1.0.0",
    "passport-local": "^1.0.0",
    "serve-favicon": "^2.3.0",
    "socket.io": "^1.3.5",
    "socket.io-client": "^1.3.5",
    "socketio-jwt": "^4.2.0",
    "uuid": "^3.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.0.0",
    "babel-core": "^6.6.5",
    "babel-register": "^6.6.5",
    "babel-plugin-transform-class-properties": "^6.6.0",
    "babel-plugin-transform-runtime": "^6.6.0",
    "babel-preset-es2015": "^6.6.0",
    "del": "^2.0.2",
    "gulp": "^3.9.1",
    "gulp-add-src": "^0.2.0",
    "gulp-angular-templatecache": "^1.7.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-babel": "^6.1.2",
    "gulp-typescript": "~2.13.0",
    "gulp-typings": "^1.3.6",
    "gulp-tslint": "^5.0.0",
    "gulp-cache": "^0.4.2",
    "gulp-concat": "^2.6.0",
    "gulp-env": "^0.4.0",
    "gulp-filter": "^4.0.0",
    "gulp-imagemin": "^2.2.1",
    "gulp-inject": "^4.0.0",
    "gulp-istanbul": "~0.10.3",
    "gulp-istanbul-enforcer": "^1.0.3",
    "gulp-jscs": "^3.0.2",
    "gulp-jshint": "^2.0.0",
    "jshint": "2.9.2",
    "gulp-livereload": "^3.8.0",
    "gulp-load-plugins": "^1.0.0-rc.1",
    "gulp-clean-css": "^2.0.6",
    "gulp-mocha": "^2.1.3",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-ng-constant": "^1.1.0",
    "gulp-node-inspector": "^0.1.0",
    "gulp-plumber": "^1.0.1",
    "gulp-protractor": "^2.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.0.0",
    "gulp-rev-replace": "^0.4.2",
    "gulp-sort": "^2.0.0",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-svgmin": "^1.1.2",
    "gulp-uglify": "^1.2.0",
    "gulp-useref": "^3.0.3",
    "gulp-util": "^3.0.5",
    "gulp-watch": "^4.3.5",
    "grunt": "^1.0.1",
    "grunt-build-control": "^0.7.0",
    "isparta": "^4.0.0",
    "utile": "~0.3.0",
    "nodemon": "^1.3.7",
    "run-sequence": "^1.1.0",
    "lazypipe": "^1.0.1",
    "wiredep": "^2.2.2",
    "open": "~0.0.4",
    "jshint-stylish": "^2.2.0",
    "connect-livereload": "^0.5.3",
    "istanbul": "~0.4.1",
    "chai": "^3.2.0",
    "sinon": "^1.16.1",
    "chai-as-promised": "^5.1.0",
    "chai-things": "^0.2.0",
    "karma": "~0.13.3",
    "karma-firefox-launcher": "^1.0.0",
    "karma-script-launcher": "^1.0.0",
    "karma-chrome-launcher": "^1.0.1",
    "karma-jade-preprocessor": "0.0.11",
    "karma-phantomjs-launcher": "~1.0.0",
    "karma-ng-html2js-preprocessor": "^1.0.0",
    "karma-spec-reporter": "~0.0.20",
    "sinon-chai": "^2.8.0",
    "mocha": "^2.2.5",
    "karma-mocha": "^1.0.1",
    "karma-chai-plugins": "~0.7.0",
    "phantomjs-prebuilt": "^2.1.4",
    "proxyquire": "^1.0.1",
    "supertest": "^1.1.0",
    "tslint": "^3.5.0",
    "typings": "^0.8.1"
  },
  "engines": {
    "node": "^4.4.0",
    "npm": "^2.14.20"
  },
  "scripts": {
    "test": "gulp test",
    "postinstall": "./node_modules/.bin/typings install",
    "update-webdriver": "node node_modules/protractor/bin/webdriver-manager update",
    "start": "node server"
  },
  "private": true
}

Answer 1

由于bootstrap依赖于jQuery，Angular和bootstrap相互争斗。现在，angular-bootstrap试图使用ui bootstrap协调两者。

<div ng-controller="DropdownCtrl">
<!-- Simple dropdown -->
<span uib-dropdown on-toggle="toggled(open)">
  <a href id="simple-dropdown" uib-dropdown-toggle>
    Click me for a dropdown, yo!
  </a>
  <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
    <li ng-repeat="choice in items">
      <a href>{{choice}}</a>
    </li>
  </ul>
</span>
</div>

来自http://angular-ui.github.io/bootstrap/这是我寻找解决方案的地方。

Answer 2

请确保您已链接bootstrap.js和jquery.js文件，并且有时jquery版本存在问题。

Answer 3

如果您使用的是角度cli，您可以：

首先：npm install bootstrap @ next

//也安装jquery等。

然后将其放入您的文件 angular-cli.json ：

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "styles.css"
  ],
  "scripts": [
      "../node_modules/bootstrap/dist/js/bootstrap.js",
      "../node_modules/jquery/dist/jquery.js",
      "../node_modules/tether/dist/js/tether.js"
  ],