角JS管理员用户与正常用户 [英] Angular JS admin user vs normal user

问题描述

如何区分的角度为JS管理员SPA外观和普通用户？我也尝试NG-秀，但同时刷新页面的隐藏选项菜单第二个是可见的。任何最佳实践，以单独的页面字段和选项为admin和普通用户？

 ＆LT; D​​IV CLASS =集装箱navbarcontainer＆GT;
    ＆LT;导航类=导航栏导航栏逆的风格=的z-index：1;＆GT;
        ＆LT; D​​IV CLASS =集装箱液的风格=填充右：12px的;填充左：12px的; FONT-SIZE：12px的;＆GT;
            ＆LT; D​​IV CLASS =导航栏头＆GT;
              ＆LT;按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=＃myNavbar＆GT;
                ＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
                ＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
                ＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
              ＆LT; /按钮＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV CLASS =导航栏崩崩滚动菜单ID =myNavbar＆GT;
              ＆LT; UL类=NAV导航栏，导航showActiveClasss boxyfontmenu＆GT;
                ＆LT;李＆GT;＆LT;一个UI的SREF =家级=可见-XS bordermenuitem数据切换=崩溃数据目标=Navbar的崩溃。＆GT;＆LT;跨度类=ID = SP＆GT;家庭和LT; / SPAN＆GT;＆LT; / A＆GT;
                ＆LT;一个UI的SREF =家级=隐藏-XS bordermenuitemID =SP＆GT;家庭和LT; / SPAN＆GT;＆LT; / A＆GT;
                ＆LT; /李＆GT;
                ＆LT;李＆GT;＆LT;一个UI的SREF =铃声级=可见-XS数据切换=崩溃数据目标=＆GT导航栏崩溃。＆LT;跨度ID =SP＆GT;铃声＆LT; / SPAN＆GT;＆LT; / A＆GT;
                ＆LT;一个UI的SREF =铃声级=隐藏-XS＆GT;＆LT;跨度ID =SP＆GT;铃声＆LT; / SPAN＆GT;＆LT; / A＆GT;
                ＆LT; /李＆GT;
                ＆LT;李NG秀=user.role =='管理员'＆GT;＆LT;一个UI的SREF =用户列表级=可见-XS数据切换=崩溃数据目标=导航栏-collapse＆GT;＆LT;跨度ID =SP＆gt;用户列表＆LT; / SPAN＆GT;＆LT; / A＆GT;
                ＆LT;一个UI的SREF =用户列表级=隐藏-XS＆GT;＆LT;跨度ID =SP＆gt;用户列表＆LT; / SPAN＆GT;＆LT; / A＆GT;
                ＆LT; /李＆GT;
                ＆LT;李＆GT;＆LT;一个UI的SREF =联系我们级=可见-XS数据切换=崩溃数据目标=Navbar的崩溃。＆GT;＆LT;跨度ID =SP＆GT;联系我们＆LT; / SPAN＆GT;＆LT; / A＆GT;
                ＆LT;一个UI的SREF =联系我们级=隐藏-XS＆GT;＆LT;跨度ID =SP＆GT;联系我们＆LT; / SPAN＆GT;＆LT; / A＆GT;
                ＆LT; /李＆GT;
              ＆LT; / UL＆GT;
              ＆LT; UL类=NAV导航栏，导航栏导航右＆GT;
                ＆LT;李＆GT;＆LT; A HREF =＆GT;＆LT; I类=发发Facebook的方脸谱＆GT;＆LT; / I＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
                ＆LT;李＆GT;＆LT; A HREF =＆GT;＆LT; I类=发FA-叽叽喳喳叽叽喳喳＆GT;＆LT; / I＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
                ＆LT;李＆GT;＆LT; A HREF =＆GT;＆LT; I类=发FA-YouTube上播放的YouTube＆GT;＆LT; / I＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
              ＆LT; / UL＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / NAV＆GT;
＆LT; / DIV＆GT;
 

解决方案

隐藏所有的默认和规则设置样式也许

 ＆LT;李班=隐藏由默认的NG-CLASS ={'隐藏通过默认'：isAdmin}＆GT;＆LT; /李＆GT;
 

在控制器中设置isAdmin与timout为false或当您加载从服务器的规则...默认情况下将工作：D结果
请注意，您的初始值应该是真正为这个

How to differentiate SPA appearance for Admin and normal user in Angular JS? I did try ng-show to but while refreshing the page the hidden options in menu is visible for a second. Any best practice to separate page fields and options for admin and normal user?

<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>

解决方案

hide all by default and set style for rules maybe

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

Set isAdmin in controller with timout to false or when you load the rules from server... it will work by default :D
Note that your initial value should be true for this

这篇关于角JS管理员用户与正常用户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！