javascript - AngularJS中单个路由器的多个 View

Question

我有一个常见的 HTML，其中 header 在登录后需要更改。

<div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand"></h3>
              <ul class="nav masthead-nav">
                <li class="active"  ng-show="NotLoggedIn" ><a href="#/login">Login &nbsp;<b>|</b></a></li>
                <li  ng-show="NotLoggedIn"><a href="#/register">Register</a></li>
              <li class="active"  ng-show="LoggedIn" ><a href="#/login">Welcome &nbsp;{{UserName}}<b>|</b></a></li>
                <li  ng-show="LoggedIn" ><a href="#/register">LogOut</a></li>

              </ul>
            </div>
          </div>

          <div ng-view class="mailContent">

          </div>

app.js

app.config(function($routeProvider){

    $routeProvider.when('/',{
        templateUrl : 'template/home.html',
        controller : 'HomeController'
    })
    .when('/login',{
        templateUrl :'template/login.html',
        controller : 'LoginController'

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

登录成功后，NotLoggedIn 应隐藏，LoggedIn 应显示。如何实现这个场景。

Answer 1

您可以在 AngularJS 中使用ng-if。您必须为 ng-if 分配一个 bool 值。这样，值为 false 的 DOM 将被删除，而值为 true 的 DOM 将被显示

<ul class="nav masthead-nav">
  <li class="active"  ng-if="NotLoggedIn" >
        <a href="#/login">Login &nbsp;<b>|</b></a>
  </li>
  <li  ng-if="NotLoggedIn">
        <a href="#/register">Register</a>
  </li>
  <li class="active"  ng-if="LoggedIn" >
        <a href="#/login">Welcome &nbsp;{{UserName}}<b>|</b></a>
  </li>
  <li  ng-if="LoggedIn" >
       <a href="#/register">LogOut</a>
  </li>
</ul>