Question

我有一个共同的HTML，其中标题在登录后会发生变化。

<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指定一个布尔值。这样，具有值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>

Answer 2

创建服务，维护用户的登录状态，以便控制器之间的信息可以共享。

将服务注入登录控制器以执行实际登录。

将服务注入主控制器以访问状态并相应地调整用户界面。

Answer 3

您可以将两个标题放在页面顶部并使用＆＃34; ng-if＆＃34;指令启用/禁用所需模板。例如：

'LoginController'

$scope.currentSection = "login";


'index.html'

<div ng-if="currentSection === login" ng-include="'views/headerLogOut.html'"></div>
<div ng-if="currentSection !== login" ng-include="'views/headerLogoIn.html'"></div>

angularjs中单个路由器的多视图

3 个答案: