AngularJS ng-view 布局管理

Question

嗨，我正在使用 angularjs 开发一个项目。 我的轮换逻辑是

.state( "authenticate", {
        url: '/',
        templateUrl : "views/login.html", 
        controller  : "LoginCtrl",
        data : {
            requireLogin : false
        }
    })
    .state( "beats", {
        url: '/beats',
        templateUrl : "views/beats.html", 
        controller  : "BeatsCtrl",
        data : {
            requireLogin : true
        }
    })

.state( "outlets", {
        url: '/outlets',
        templateUrl : "views/beats.html", 
        controller  : "BeatsCtrl",
        data : {
            requireLogin : true
        }
    })

我在 index.html 中有 ng-view，其中首先包含 login.html(url '/')。在每个状态登录后，我想使用 ng-include 在每个模板中包含一个 navbar。

目前我正在每个页面上写这行

<div ng-include=" 'templates/navbar.html' "></div>

但我只想包含一次，并且每个 View 都应该在其下方渲染。但问题是这个导航栏模板本身在 ng-view 中渲染。 据我所知，我们不能在一个应用程序中拥有多个 ng-view。

任何人都可以告诉我执行此操作的最佳方法是什么。

Answer 1

您可能会将此导航栏包含在 index.html 本身中，但使用 ng-if 或 ng-show 隐藏它，直到用户登录。用户登录后，您可能会有一个标记，其计算结果为true 并且此导航栏可以出现在每个后续页面上。

在index.html

<div id="navbar" ng-if="isUserLoggedIn">
    // nav bar code
</div>

并且此“isUserLoggedIn”将由范围上的 LoginCtrl 设置为 true。