我想根据用户是否已记录来填充带有动态列表的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>
有什么建议如何处理情况?
你是对的。您的情况有闪烁。我试图以多种不同的方式实施,并获得了一个解决方案。这不是我必须说的最好的解决方案,但不会闪烁。您只需尝试使用两个单独的菜单作为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