72

私はAngularとTwitterBootstrapnavbarを使用しており、折りたたみ機能を機能させようとしています。

部分的：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関数はデータをロードし、特定のアイテムをアクティブとしてマークし、モデルに完全にデータを入力します。動作しないのは、レスポンシブ折りたたみ機能だけです。画面のサイズを変更すると、メニュー項目が消えてメニューのアイコンが表示されますが、クリックしても機能しません。私はこれに固執していて、それは簡単な修正でなければならないことを知っていますが、私はそれを理解することができません。どんな助けでもいただければ幸いです！

4

8 に答える 8

104

興味のある方へ-Bootstrapのjavascriptなしでこれを実装する別の方法があります。

AngularのUIをインポートします-ブートストラップ。

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/

于 2013-07-16T09:16:40.597 に答える
83

純粋なAngularJSで動作させ、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}">

ドロップダウン

また、ナビゲーションバーにドロップダウンメニューがある場合、cssクラスが「collapse」ではなく「open」であることを除いて、同じことがそれらに適用されます。

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

複数のドロップダウンはすべて、角度ルートスコープで独自の状態変数を必要とすることに注意してください（コントローラーを使用していない場合）。したがって、ここでは最初のドロップダウンに「dd1」という名前を付けました。一意である必要があります。そうでない場合、複数のドロップダウンが同時に開閉します。（これはかなり面白いですが、めったに使用できません）。

于 2014-05-28T17:51:05.650 に答える
7

これはトリッキーなものでした。ドキュメントは一方向を示しており、それは素晴らしい機能を果たしています。ドキュメントの例（ 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='#'その属性を追加すると、問題も解決します。

于 2013-02-11T15:58:39.337 に答える
7

コントローラーを使用する必要はありません。テンプレートが最初にコンパイルされるときに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>
于 2014-03-18T00:29:32.870 に答える
7

あなたが探しているなら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に感謝します。

于 2016-10-02T12:09:20.853 に答える
4

これは、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を含める必要があります。

于 2016-02-15T20:47:23.633 に答える
0

これは単純なJS修正になると思います。

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

このコードが正しく機能していない場合は、正しくバインドされていることを確認して、ページをロードするコントローラーに配置します。

于 2014-12-06T07:02:11.890 に答える
0

jquery.min.jsとbootstrap.min.jsをindex.htmlファイルに追加するだけで、この問題は解決しました。

折りたたみ可能なナビゲーションには、jquery.min.jsとbootstrap.min.jsを含める必要があります

于 2015-12-01T04:01:10.740 に答える