Question

如何在Angular JS中区分Admin和普通用户的SPA外观？我确实尝试过ng-show但是在刷新页面时，菜单中隐藏的选项会显示一秒钟。为管理员和普通用户分隔页面字段和选项的最佳做法是什么？

<div class="container navbarcontainer">  
    <nav class="navbar navbar-inverse" style="z-index: 1;">
        <div class="container-fluid" style="padding-right: 12px; padding-left: 12px; font-size: 12px;">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
              </button>
            </div>
            <div class="collapse navbar-collapse scrollable-menu" id="myNavbar">
              <ul class="nav navbar-nav showActiveClasss boxyfontmenu">
                <li><a ui-sref="home" class="visible-xs bordermenuitem"  data-toggle="collapse" data-target=".navbar-collapse"><span class="" id="sp">Home</span></a>
                <a ui-sref="home" class="hidden-xs bordermenuitem"  id="sp">Home</span></a>
                </li>
                <li><a ui-sref="ringtones" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span  id="sp">Ringtones</span></a>
                <a ui-sref="ringtones" class="hidden-xs"><span  id="sp">Ringtones</span></a>
                </li>
                <li ng-show="user.role=='admin'"><a ui-sref="userList" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span  id="sp">User list</span></a>
                <a ui-sref="userList" class="hidden-xs"><span  id="sp">User list</span></a>
                </li>
                <li><a ui-sref="contactus" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span id="sp">Contact us</span></a>
                <a ui-sref="contactus" class="hidden-xs"><span id="sp">Contact us</span></a>
                </li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href=""><i class="fa fa-facebook-square facebook"></i></a></li>
                <li><a href=""><i class="fa fa-twitter twitter"></i></a></li>
                <li><a href=""><i class="fa fa-youtube-play youtube"></i></a></li>
              </ul>
            </div>
        </div>
    </nav>
</div>

Answer 1

默认隐藏所有内容并为规则设置样式

<li class="hidden-by-default" ng-class="{'hidden-by-default': !isAdmin}"></li>

在控制器中设置isAdmin，将timout设置为false或从服务器加载规则...默认情况下它将起作用：D
请注意，此

的初始值应为true

Angular JS管理员用户与普通用户

1 个答案: