Question

header.html

<div class="header-container" ng-controller="headerCtrl">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
                <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="#">
                <img ng-src="images/papaya.png" alt="papayastreet.art">
            </a>
        </div>
        <div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
            <ul class="nav navbar-nav navbar-right">
                <li ui-sref-active="active"><a ui-sref="home">home</a></li>
                <li ui-sref-active="active"><a ui-sref="apparel">apparel</a></li>
                <li ui-sref-active="active"><a ui-sref="artworks">artworks</a></li>
                <li ui-sref-active="active"><a ui-sref="commissionArtworks">commissions artwork</a></li>
                <li ui-sref-active="active"><a ui-sref="contact">contact</a></li>
            </ul>
        </div>
        </div>
    </nav>
</div>

headerCtrl.js

    angular.module('app').controller('headerCtrl', function ($scope) {
   $scope.isNavCollapsed = true;
});

app.js

angular
    .module('app',['ui.router','ngAnimate','ui.bootstrap'])

我使用ui-bootstrap导航栏，我从这里检查教程https://angular-ui.github.io/bootstrap/ 点击链接后，导航栏没有关闭。点击链接后如何关闭它？

Answer 1

我认为您没有包含必需的依赖项之一ui-bootstrap或bootstrap.css文件。

＆＃13;

var app = angular.module('app',['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
app.controller('CollapseDemoCtrl', function ($scope) {
  $scope.isNavCollapsed = true;
});

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <div ng-app="app" ng-controller="CollapseDemoCtrl">
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
            <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"  ng-click="isNavCollapsed = !isNavCollapsed" href="#">A menu</a>
    </div>
    <div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
        <ul  class="nav navbar-nav">
            <li  ui-sref-active="active"><a ui-sref="home">home</a></li>
            <li  ui-sref-active="active"><a ui-sref="about">about</a></li>
        </ul>
    </div>
</nav>
</div>

＆＃13;

当点击链接ui-bootstrap响应时，导航栏没有关闭

1 个答案: