闪烁动态 <md-menu-content> 列表答案

【问题标题】：Flickering with dynamic <md-menu-content> list闪烁动态 <md-menu-content> 列表
【发布时间】：2016-06-18 13:17:16
【问题描述】：

我想根据用户是否登录来使用动态列表填充 md-menu-content。代码：

     <md-menu>
        <md-button class="md-icon-button" aria-label="Account" ng-click="$mdOpenMenu($event)">
            <md-icon md-svg-icon="~/../Content/img/icons/ic_account_box_white_48px.svg" class="s48" aria-label="Account"></md-icon>
        </md-button>
        <md-menu-content width="4">
            <md-menu-item ng-if-start="vm.user.isLogged">
                <p>Logged as: {{ vm.user.username }}</p>
            </md-menu-item>
            <md-menu-divider></md-menu-divider>
            <md-menu-item>
                <md-button ng-click="vm.myProfile($event)">
                    My profile
                </md-button>
            </md-menu-item>
            <md-menu-item ng-if-end>
                <md-button ng-click="vm.logout($event)">
                    Logout
                </md-button>
            </md-menu-item>

            <md-menu-item ng-if-start="!vm.user.isLogged">
                <md-button ng-click="vm.openRightSideNav('login')">
                    Login
                </md-button>
            </md-menu-item>
            <md-menu-item>
                <md-button ng-click="vm.openRightSideNav('register')">
                    Register
                </md-button>
            </md-menu-item>
            <md-menu-item class="menu-item-facebook" ng-if-end>
                <md-button ng-click="vm.openRightSideNav('register')">
                    <span class="icon-button-facebook"></span>
                    Log in with Facebook
                </md-button>
            </md-menu-item>
        </md-menu-content>
    </md-menu>

这可行，但是一旦用户注销，就会出现闪烁。我的意思是，一瞬间所有菜单项都显示出来了。使用 ng-switch 可以消除闪烁，但额外的 dom 元素会破坏菜单：

         <md-menu-content width="4">
            <ng-switch on="vm.user.isLogged">
                <span ng-switch-when="true">
                ...
                </span>
                <span ng-switch-default>
                    ...
                </span>
            </ng-switch>
        </md-menu-content>

对如何处理这种情况有什么建议吗？

【问题讨论】：

标签： angularjs angular-material angular-ng-if

【解决方案1】：

你是对的。你的情况有一个闪烁。我尝试以多种不同的方式实施并得到了一种解决方案。这不是我必须说的最佳解决方案，但不会有任何闪烁。您只需尝试为logIn 和logOut 使用两个单独的菜单。

这是示例代码。

<md-menu ng-if="vm.user.isLogged">
 //md-menu-item
</md-menu>
<md-menu ng-if="!vm.user.isLogged">
 //md-menu-item
</md-menu>

这是一个工作示例。 http://codepen.io/next1/pen/wWzebw

【讨论】：

谢谢！按预期工作。