AngularJS가있는 Twitter Bootstrap Navbar-축소가 작동하지 않음

AngularJS가있는 Twitter Bootstrap Navbar-축소가 작동하지 않음

---

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 -->

navbar가 완벽하게 표시됩니다. 드롭 다운이 훌륭하게 작동합니다. Angular 함수는 데이터를로드하고 특정 항목을 활성으로 표시하고 모델을 완벽하게 채 웁니다. 작동하지 않는 유일한 것은 반응 형 축소 기능입니다. 화면 크기를 조정하면 메뉴 항목이 사라지고 메뉴 아이콘이 나타나지만 클릭이 작동하지 않습니다. 나는 이것에 갇혀 있고 그것이 간단한 수정이어야한다는 것을 알고 있지만 나는 그것을 알아낼 수 없다. 어떤 도움을 주시면 감사하겠습니다!

---

관심있는 분들을 위해-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 라이브러리가없는 작업을 원했고 매우 간단했습니다. 여기 예제 (부트 스트랩 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}">

드롭 다운

또한 navbar에 드롭 다운 메뉴가있는 경우 css 클래스가 'collapse'가 아니라 'open'이라는 점을 제외하면 동일한 내용이 적용됩니다.

<li class="dropdown" ng-class="{ open : dd1 }" ng-init="dd1 = false" ng-click="dd1 = !dd1">

여러 드롭 다운은 모두 각도 루트 범위에 자체 상태 변수가 필요합니다 (컨트롤러를 사용하지 않는 경우). 따라서 여기에서 첫 번째 드롭 다운 이름을 'dd1'로 지정했습니다. 고유해야합니다. 그렇지 않으면 여러 드롭 다운이 동시에 열리고 닫힙니다. (꽤 재밌지 만 거의 사용할 수 없습니다).

---

이것은 까다로운 문제였습니다. 문서는 한 가지 방법을 보여 주며 훌륭하게 작동합니다. 문서 예제 ( 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">

이유는 모르겠지만 변경하면 기능이 훌륭했습니다.

편집하다

Arbiter는 <a />에 href='#'속성 이 없다고 지적했습니다 . 해당 속성을 추가하면 문제도 해결됩니다.

---

컨트롤러를 사용할 필요가 없습니다. 템플릿이 처음 컴파일 될 때 플래그 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">

and menu should look like this.

<div class="navbar-collapse" id="bs-navbar-collapse" [class.collapse]="isCollapsed">
      <ul class="nav navbar-nav">
        <li>
          <a href="">
            Dashboard

Your controller should be be something like this.

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;
  }

}

See, this is relatively easy in angular2. thanks to @yankee for the answer.

---

Here is a working implementation using the ui.bootstrap.collapse module. 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>

Controller (using controllerAs syntax):

(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;
    }
  }

})();

Note: for animation to work in ui.bootstrap modules, you must include ngAnimate.

---

I feel that this will be simple JS fix:

//for close, opened dropdown.
$(".nav a").click(function () {
    if ($(".navbar-collapse").hasClass("in")) {
        $('[data-toggle="collapse"]').click();
    }
});

If this code is not working correctly then see that it's binding correctly, so place it in controller that loads page.

---

Just adding jquery.min.js and bootstrap.min.js to the index.html file solved this problem.

For collapsable navigation we need to include jquery.min.js and bootstrap.min.js

참고URL : https://stackoverflow.com/questions/14741988/twitter-bootstrap-navbar-with-angularjs-collapse-not-functioning