angular指令显示顺序

Question

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

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

[ Sign in | Sign up ] [ select box ]

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

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

[ select box ] [ Sign in | Sign up ]

Answer 1

这与css: float: 相关。

angular指令显示顺序

angular directive display order

css

angular-directive

angular