Я использую Angular и Twitter Bootstrap navbar и пытаюсь заставить функционировать коллапс работать.
Частичный: program.html
<div class="navbar navbar-inverse navbar-static-top" ng-include="'partials/navbar.html'" ng-controller="NavbarCtrl"></div>
Частичный: navbar.html
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Short Course</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
<li class="dropdown ng-class: settingsActive;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Intro <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a onclick='$("#myModal").modal("show");'>User Info</a></li>
<li><a href="#/setup">Settings</a></li>
<li><a href="#/get-started">Getting started</a></li>
</ul>
</li>
<li class="dropdown ng-class: programActive;" ng-controller="ProgramCtrl">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Lessons <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ng-repeat='o in lessonTypes'>
<a href="#/program/{{o.value}}">{{o.title}}</a>
</li>
<li class="divider"></li>
<li><a href="#/freeform">Free Form</a></li>
</ul>
</li>
<li class="dropdown ng-class: reportsActive;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Grades <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Simple Report</a></li>
<li><a href="#">Comprehensive Report</a></li>
<li class="divider"></li>
<li><a href="#">Current Grade Report</a></li>
<li><a href="#">Final Grade Report</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a></li>
<li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
Наббар отлично отображен. Выпадающие меню отлично работают. Функции Angular загружают данные и отмечают конкретные элементы как активные и отлично заполняют модели. Единственное, что не работает, - это функция быстрого реагирования. Когда я изменяю размер экрана, элементы меню исчезают, и появляется значок для меню, но щелчок по нему не работает. Я застрял на этом, и я знаю, что это должно быть простым решением, но я просто не могу понять это. Любая помощь будет оценена!
Это было сложно. Документы показали один путь, и он отлично работает. Я скопировал пример docs (http://twitter.github.com/bootstrap/components.html#navbar) и попытался использовать его. Затем я перешел на страницу примеров и попробовал макет, указанный здесь: http://twitter.github.com/bootstrap/examples/fluid.html
Единственное различие заключалось в <button>
вместо <a>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Вместо
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Я не знаю, почему, но изменение, которое сделало его отличным.
ИЗМЕНИТЬ
Арбитр указал, что<a />
отсутствует атрибут href='#'
. Добавление этого атрибута также решит проблему.Для желающих - вот еще один способ реализации этого без JavaScript-скрипта Bootstrap.
Импорт Angular UI-Bootstrap.
HTML:
<div class="navbar navbar-inverse" ng-controller="NavBarCtrl">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="#">Short Course</a>
<div class="nav-collapse" uib-collapse="isCollapsed">
<ul class="nav">
<li><a href="#"><i class="icon-home icon-white"></i> Home</a>
</li>
<li><a href="#">Lessons</a>
</li>
<li><a href="#">Grades</a>
</li>
</ul>
<ul class="nav pull-right">
<li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a>
</li>
<li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
<!-- /navbar-inner -->
</div>
JS:
var myApp = angular.module('myApp', ['ui.bootstrap']);
function NavBarCtrl($scope) {
$scope.isCollapsed = true;
}
И скрипка - http://jsfiddle.net/KY5Mf/
Я хотел заставить его работать с чистым AngularJS и без дальнейшей библиотеки JavaScript, и это оказалось довольно простым. Требуется только два изменения, начиная с примера здесь (bootstrap v3):
Вместо
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Я использовал:
<button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
и вместо
<div class="collapse navbar-collapse">
Я использовал:
<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
Кроме того, если у вас есть выпадающие меню в вашем навигационном баре, то же самое относится к ним, за исключением того, что класс css не "сворачивается", а "открывается":
<li class="dropdown" ng-class="{ open : dd1 }" ng-init="dd1 = false" ng-click="dd1 = !dd1">
Обратите внимание, что для нескольких выпадающих списков потребуется вся необходимая переменная состояния в корневой области angular (если вы не используете контроллер). Поэтому я назвал первое раскрывающееся меню "dd1" здесь, оно должно быть уникальным, иначе одновременно откроется/закрыть несколько выпадающих меню. (что довольно забавно, но редко можно использовать).
Не нужно подключать контроллер. Просто используйте ng-init
вместо этого, чтобы инициализировать флаг isCollapsed
, когда шаблон изначально скомпилирован.
<div class="navbar navbar-inverse" ng-controller="NavBarCtrl">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="#">Short Course</a>
<div class="nav-collapse" collapse="isCollapsed">
<ul class="nav">
<li><a href="#"><i class="icon-home icon-white"></i> Home</a>
</li>
<li><a href="#">Lessons</a>
</li>
<li><a href="#">Grades</a>
</li>
</ul>
<ul class="nav pull-right">
<li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a>
</li>
<li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
<!-- /navbar-inner -->
</div>
Если вы ищете Angular2
. Затем удар - это необходимые изменения.
<button type="button" class="navbar-toggle collapsed" (click)="toggleCollapse()"
aria-expanded="false">
и меню должно выглядеть так.
<div class="navbar-collapse" id="bs-navbar-collapse" [class.collapse]="isCollapsed">
<ul class="nav navbar-nav">
<li>
<a href="">
Dashboard
Ваш контроллер должен быть чем-то вроде этого.
import { Component} from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
isCollapsed: boolean = true;
toggleCollapse(): void {
this.isCollapsed = !this.isCollapsed;
}
}
См., это относительно легко в Angular2
. спасибо @yankee за ответ.
Вот работающая реализация с использованием модуля ui.bootstrap.collapse. https://jsfiddle.net/7z8hLuyu/
HTML
<div ng-app="app">
<nav class="navbar navbar-default">
<div class="container-fluid" ng-controller="NavigationCtrl as vm">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="vm.toggleCollapse()">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" style="overflow:hidden!important;" uib-collapse="vm. isCollapsed">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></ li>
<li><a href="#">Link</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
Контроллер (используя синтаксис controllerAs):
(function(){
'use strict';
angular
.module('app', ['ngAnimate','ui.bootstrap.collapse'])
.controller('NavigationCtrl', NavigationCtrl);
NavigationCtrl.$inject = [];
function NavigationCtrl() {
var vm = this;
vm.isCollapsed = true;
vm.toggleCollapse = toggleCollapse;
function toggleCollapse() {
vm.isCollapsed = !vm.isCollapsed;
}
}
})();
Примечание. Чтобы анимация работала в модулях ui.bootstrap, вы должны включить ngAnimate.
Просто добавив jquery.min.js и bootstrap.min.js в файл index.html, эта проблема решена.
Для сворачиваемой навигации нам нужно включить jquery.min.js и bootstrap.min.js
Я чувствую, что это будет простое исправление JS:
//for close, opened dropdown.
$(".nav a").click(function () {
if ($(".navbar-collapse").hasClass("in")) {
$('[data-toggle="collapse"]').click();
}
});
Если этот код работает неправильно, убедитесь, что он правильно привязан, поэтому поместите его в контроллер, который загружает страницу.