Question

我正在开展AngularJS的第一个项目，并且我使用ng-view和$routeProvider进行模板测试，但是我遇到了一个小问题。在我的几个页面（登陆，登录和注册），我不希望导航栏显示;但我希望导航栏显示在我所有其他视图上。使用AngularJS解决此问题有哪些选择？

以下链接包括index.html，login.html和my $ routeProvider

的index.html

<body ng-app="hello">

    <!-- FIXED NAVBAR -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="#">hello</a>
        </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Add Group</a></li>
              <li><a href="#">Upload File</a></li>
              <li class="active"><a href="#">Notifications</a></li>
            </ul>
          </div>
      </div>
    </div>

    <div class="container">
      <div ng-view></div>
    </div>
</body>

的login.html

<div class="container">
<form ng-controller="AdminUserCtrl" class="form-signin" role="form" method="post">
    <h2 class="form-signin-heading">Please sign in</h2>
    <input type="email" class="form-control" id="inputUsername" placeholder="Email address" ng-model="login.email" required autofocus>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="login.password" required>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="remember-me"> Remember Me
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="logIn(login.email, login.password)">Sign In</button>
    <p style="text-align: center; margin-top: 5px;"><a style="text-align: center;" href="#/register">Register A New Account</a></p>
</form>

$ routeprovider

hello.config([ '$locationProvider', '$routeProvider', 
function($location, $routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'views/login.html',
            controller: 'AdminUserCtrl',
            access: { requiredLogin: false}
        }).
       when('/feed', {
            templateUrl: 'views/feed.html',
            controller: 'FeedListCtrl',
            access: { requiredLogin: true}

        otherwise({
            redirectTo: '/'
        });
 }]);

我目前正在考虑修复此问题的黑客攻击是从索引中取出导航栏的html代码，只将其添加到我需要的页面中，但我想知道是否还有其他修复方法？

Answer 1

导航栏和与ng-view分开的其他组件应具有自己的控制器。您可以使用服务从视图中的控制器向这些控制器传达信息。可以将此服务的属性绑定到导航视图，并可以根据属性的值更新其显示。例如。

app.factory("navBarService", function () {
    return {show: true};
});

app.controller("NavBarController", function (navBarService) {
    this.show = navBarService.show;
});

app.controller("SomeControllerYouRouteToController", function (navBarService) {
    navBarService.show = false;
});

使用ng-view时隐藏某些HTML元素（Angularjs）

1 个答案: