Question

我有一个Angularized引导菜单，如果它在视图中加载，则会完全折叠整个导航栏，但在index.html中则不会。当加载到我的index.html中时，它只会在单击某个项目时折叠下拉列表而不是整个导航栏。

我在视图（data-ng-view）之前的index.html中需要它，因为我在菜单和视图（AdSense）之间有内容。当我在index.html页面中放置我的视图之前，如果我点击一个链接，我就可以去那个链接...但是整个菜单在转到链接后保持打开而不是关闭。但是，“类别”的下拉菜单会按预期崩溃，而不是整体菜单。

我正在使用AngularUI并在应用程序中注入了'ui.bootstrap'（这是在视图中加载时的工作原理）。我的观点的控制器与它们相关的页面绑定。

示例：

when('/home', { templateUrl: './views/home.html', controller: 'homeCtrl' }).

这是我的导航：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-ng-init="isCollapsed = true" data-ng-click="isCollapsed = !isCollapsed">
            <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="/"><h1 id="pfch1">My Title</h1></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-ng-class="{collapse: isCollapsed}">
        <ul class="nav navbar-nav">
            <li><a href="/home">Home</a></li>
            <li class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
                <a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="/categories/1/cat1">cat1</a></li>
                    <li><a href="/categories/2/cat2">cat2</a></li>
                    <li><a href="/categories/5/cat3">cat3</a></li>
                    <li><a href="/categories/4/cat4">cat4</a></li>
                    <li><a href="/categories/6/cat5">cat5</a></li>
                    <li><a href="/categories/3/cat6">cat6</a></li>
                </ul>
            </li>
            <li><a href="/add-article">Add Article Link</a></li>
        </ul>
        <form class="navbar-form navbar-right">
            <div class="form-group">
                <div data-ng-controller="userInfo">
                    <div data-ng-controller="loginCtrl" data-ng-hide="loggedin">
                        <input class="btn btn-default" type="submit" value="Login" data-ng-click="login()" />
                    </div>
                    <div data-ng-controller="loginCtrl" data-ng-show="loggedin">
                        <input class="btn btn-default" type="submit" value="Signout" data-ng-click="logout()" />
                    </div>
                </div>
            </div>
        </form>
    </div>
</nav>

这是index.html（请注意，上面的菜单是通过ng-include包含的。我已经尝试过没有ng-include但它仍然没有崩溃）：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" data-ng-app="pfcModule">
<head>
<!-- Inform Search Bots that this is a SPA -->
<meta name="fragment" content="!" />

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="{{pageDescription | limitTo: 155}}">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<base href="/">
<title>{{pageTitle}}</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" />

<!-- Just for debuggidata-ng- purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warnidata-ng-.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Analytics -->
<script></script>
</head>
<body>

<!-- Container start -->
<div class="container">
    <!-- Top Menu -->
    <div data-ng-include="'templates/topmenu.html'"></div>
    <!-- Responsive AdSense included here -->
    <div data-ng-view></div>
    <!-- Responsive AdSense included here -->
          <hr>
    <footer>
        <p>&copy; My Site 2015 | <a href="/termsandconditions">Terms and Conditions</a></p>
    </footer>
</div>
<!-- Container end -->
<!-- Scripts placed at end of Body for execution -->
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/libs/dirPagination.js"></script>

<!-- Auth0 Scripts -->
<!-- We use client cookies to save the user credentials -->
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js"></script>
<!-- Auth0 Lock script and AngularJS module -->
<script src="//cdn.auth0.com/js/lock-6.js"></script>
<!-- angular-jwt and angular-storage -->
<script type="text/javascript" src="//rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script type="text/javascript" src="//rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<!-- Auth0 Scripts -->
<script src="//cdn.auth0.com/w2/auth0-angular-4.0.1.js"> </script>

<!-- Application Scripts -->
<script src="js/app.js"></script>
<script src="js/services/services.js"></script>
<script src="js/controllers/addArticle.js"></script>
<script src="js/controllers/articleID.js"></script>
<script src="js/controllers/articlesCategory.js"></script>
<script src="js/controllers/articlesCount.js"></script>
<script src="js/controllers/articleVoting.js"></script>
<script src="js/controllers/homeArticles.js"></script>
<script src="js/controllers/loginManagement.js"></script>
<script src="js/controllers/modalDependency.js"></script>
<script src="js/directives/directives.js"></script>
</body>

</html>

这是我的App.js：

var pfcModule = angular.module('pfcModule', [
'ngRoute',
'ui.bootstrap',
'auth0',
'angular-storage',
'angular-jwt',
'angularUtils.directives.dirPagination',
'pfcServices',
'pfcAddArticle',
'pfcArticleID',
'pfcArticlesCategory',
'pfcArticlesCount',
'pfcArticleVoting',
'pfcHomeArticles',
'pfcLoginManagement',
'pfcModalDependency',
'pfcDirectives']);

pfcModule.config([
'$routeProvider',
'authProvider',
'$httpProvider',
'$locationProvider',
'jwtInterceptorProvider',
'paginationTemplateProvider',
function ($routeProvider, authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider, paginationTemplateProvider) {
    $routeProvider.
        when('/home', { templateUrl: './views/home.html', controller: 'pfcHomeArticlesCtrl' }).
        when('/categories/:articlecategoryID/:articlecategoryName', { templateUrl: './views/categories.html', controller: 'pfcArticlesCategoryCtrl' }).
        when('/article/:articleTitle/:articleID', { templateUrl: './views/article.html', controller: 'pfcArticleIDCtrl' }).
        when('/add-article', { templateUrl: './views/add-article.html', controller: 'pfcArticlePostCtrl', requiresLogin: true }).
        when('/login', { templateUrl: './views/login.html', controller: 'loginPageCtrl' }).
        when('/termsandconditions', { templateUrl: './views/terms.html' }).
        otherwise({ redirectTo: '/home' });
    $httpProvider.defaults.headers.common['X-ZUMO-APPLICATION'] = '1111111111111111111';
    $httpProvider.defaults.headers.common['Content-Type'] = 'Application/json';
    authProvider.init({
        domain: 'aurl.com',
        clientID: '1111111111111111',
        callbackURL: location.href,
        loginUrl: '/login'
    });
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');

    jwtInterceptorProvider.tokenGetter = function (store) {
        return store.get('token');
    }

    $httpProvider.interceptors.push('jwtInterceptor');

    // Pagination provider
    paginationTemplateProvider.setPath('js/libs/dirPagination.tpl.html');


}])

.run(function ($rootScope, auth, store, jwtHelper, $location) {
$rootScope.$on('$locationChangeStart', function () {
    if (!auth.isAuthenticated) {
        var token = store.get('token');
        if (token) {
            if (!jwtHelper.isTokenExpired(token)) {
                auth.authenticate(store.get('profile'), token);
            } else {
                $location.path('/login');
            }
        }
    }

});
});

Answer 1

要在单击其中一个链接时导致菜单折叠，您可以使用ng-click切换isCollapsed的值。它在视图内部崩溃的原因可能是因为它实际上正在重新加载导航，而不是将其折叠。

像这样修改导航：

<ul class="nav navbar-nav">
    <li ng-click="isCollapsed=!isCollapsed"><a href="/home">Home</a></li>
    <li" class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
        <a class="dropdown-toggle" role="button" aria-expanded="false" href="#">Categories <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/1/cat1">cat1</a></li>
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/2/cat2">cat2</a></li>
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/5/cat3">cat3</a></li>
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/4/cat4">cat4</a></li>
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/6/cat5">cat5</a></li>
            <li ng-click="isCollapsed=!isCollapsed"><a href="/categories/3/cat6">cat6</a></li>
        </ul>
    </li>
    <li ng-click="isCollapsed=!isCollapsed"><a href="/add-article">Add Article Link</a></li>
</ul>

Plunker

仅限于Angularized Bootstrap菜单折叠下拉菜单，而不是链接点击后的整个Navbar

1 个答案: