Twitter Bootstrap Navbar with AngularJS - 접기가 기능하지 않음

Twitter Bootstrap Navbar with AngularJS - 접기가 기능하지 않음

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

네비게이션 바는 완벽하게 표시된다.드롭 다운은 올바르게 동작합니다.각도 기능은 데이터를 로드하고 특정 항목을 활성으로 표시하고 모델을 완벽하게 채웁니다.유일하게 작동하지 않는 것은 반응성 수축 기능입니다.화면 크기를 조정하면 메뉴 항목이 사라지고 메뉴 아이콘이 표시되지만 클릭해도 작동하지 않습니다.난 이 문제에 빠져있고 간단한 수정이 필요하다는 걸 알지만, 도저히 이해할 수가 없어.어떤 도움이라도 주시면 감사하겠습니다!

관심있는 분들을 위해 Bootstrap의 javascript 없이 이것을 구현하는 또 다른 방법이 있습니다.

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/

순수한 Angular와 함께 작업하고 싶었어요.JS와 더 이상의 JavaScript 라이브러리는 없으며, 매우 간단한 것으로 나타났습니다.다음의 예(부트스트랩 v3)로부터 개시하는 변경은, 다음의 2개 뿐입니다.

대신

<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에 나열된 레이아웃을 시험해 보았습니다.

은 일일 the the the the the the the a the the 。<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='#'기여하다.그 속성을 추가하는 것도 문제를 해결할 수 있습니다.

컨트롤러를 연결할 필요가 없습니다.그냥 사용하다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그럼 블로우(blow)가 필요한 변화입니다.

<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. @swere 님의 답변에 감사드립니다.

다음은 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를 포함해야 합니다.

JS 수정은 간단하다고 생각합니다.

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

이 코드가 올바르게 동작하지 않는 경우는, 올바르게 바인드 되고 있는 것을 확인할 수 있으므로, 페이지를 로드하는 컨트롤러에 넣습니다.

index.html 파일에 jquery.min.js와 bootstrap.min.js를 추가하는 것만으로 이 문제가 해결되었습니다.

접을 수 있는 네비게이션의 경우 jquery.min.js와 bootstrap.min.js를 포함해야 합니다.

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