1
У меня есть приложение MEAN, созданное yeoman angular-fullstack, которое я пытался изменить. Я хочу добавить вкладку в панель навигации, которая после нажатия отобразит дополнительные элементы в раскрывающемся списке.bootstrap navbar menu выпадающее меню не работает
Что-то вроде этого:
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
}
Я скопировал точный код выше в моем navbar.html и он по-прежнему не работает. Я думаю, проблема в том, что хотя мой bower.json имеет загрузочную загрузку в зависимостях (bootstrap ":" ~ 3.1.1 "), я не вижу, что включен в index.html, когда я делаю gulp serve (который генерирует index.html основанные на зависимостях). Любая идея? –
Переход к вашей странице и использование инструментов dev позволяют проверить, находятся ли в заголовке bootstrap.min.js и bootstrap.css. Если вы не пытаетесь добавить тег скрипта вручную с правильным источником и видите если это исправляет проблему, я знаю, что это не идеальная работа, но она позволяет вам точно знать, где проблема. –
Итак, я просто нашел что-то, что я полностью отделил.Bootstrap и ng сражаются друг с другом из-за зависимости bootstrap от jQuery. Существуют различные библиотеки, которые можно использовать для работы бутстрапа в угловом режиме. Угловая бутстрап - одна, но UI Bootstrap, похоже, имеет то, что вы хотите. –