时间戳

首页 > 解决方案 > 角度指令显示顺序

css - 角度指令显示顺序

问题描述

我在一个 div 中有 3 个 UL。2 UL 包含检查用户是否通过身份验证的指令。像这样：

<div class="language-options">
    <ul>
        <li>
            <a>
                <select box></select box>
            </a>
        </li>
    </ul>
    <!-- Show this for logged out users -->
    <ul *appShowAuthed="false">
        <li>
            <a>
                Sign in
            </a>
        </li>
        <li>
            <a>
                Sign up
            </a>
        </li>
    </ul>
    <!-- Show this for logged in users -->
    <ul *appShowAuthed="true">
        <li>
            <a>
                Home
            </a>
        </li>
        <li>
            <a>
                <i></i>&nbsp;New Article
            </a>
        </li>
        <li>
            <a>
                <i></i>&nbsp;Settings
            </a>
        </li>
        <li>
            <a>
                <img [src]="currentUser.image" *ngIf="currentUser.image" class="user-pic" /> {{ currentUser.username }}
            </a>
        </li>    
    </ul>
</div>

发生的事情是，虽然我的语言选项选择框在 html 代码之前，但其他 2 个 UL 在页面中显示在它们之后：

[ Sign in | Sign up ] [ select box ]

似乎由于指令执行，html 代码需要更长的时间来呈现，因此在语言选项之前显示。

我如何设置语言选项 UL 在登录前显示 | 注册？见下文：

[ select box ] [ Sign in | Sign up ]

标签： cssangularangular-directive

解决方案

这与 css:float:right 有关。

推荐阅读