Question

我试图根据存储在父作用域中的布尔值有条件地显示指令。我无法弄清楚为什么以下不起作用。通过，“不工作”我的意思是既没有显示指令。

 <ul class="nav navbar-nav pull-right" ng-switch="userIsAuthenticated">
    <account-item item="accountMenuItem" ng-repeat="accountMenuItem in anonymousMenuItems" ng-switch-when="false"></account-item>
    <account-item item="accountMenuItem" ng-repeat="accountMenuItem in authenticatedMenuItems" ng-switch-when="true"></account-item>
</ul>

在我的测试用例中，即使将“userIsAuthenticated”设置为“false”，也没有显示任何指令。如果我在指令上面添加{{userIsAuthenticated}}，则按预期输出'false'。

我也试过这个：

 <ul class="nav navbar-nav pull-right" ng-switch={{userIsAuthenticated}}>
    <account-item item="accountMenuItem" ng-repeat="accountMenuItem in anonymousMenuItems" ng-switch-when={{false}}></account-item>
    <account-item item="accountMenuItem" ng-repeat="accountMenuItem in authenticatedMenuItems" ng-switch-when={{true}}></account-item>
</ul>

如果我从它们将显示的任一指令中删除条件ng-switch-when属性。所以我知道问题是我的ng-switch。

Answer 1

您对ng-switch的使用在此简化演示中有效，当然没有account-item指令： http://plnkr.co/AppN8xmFeIwjaP631lj7

如果没有看到account-item的代码，就很难猜出可能会干扰它的内容。您可以考虑使用ng-if来处理显示一个或另一个项目。

<ul>
  <div ng-if="!userIsAuthenticated">Content when not authenticated</div>
  <div ng-if="userIsAuthenticated">Content when authenticated</div>
</ul>

更新还要确保绑定到对象属性，而不是基本布尔值。喜欢：user. authenticated

Answer 2

由于ngSwitchWhen的优先级为800，因此您需要为自定义指令（即account-item）设置更高的优先级，以便在{{1}处理之前对其进行编译指令。 E.g：

ngSwitchWhen

Angular JS：ng-switch on boolean不工作

2 个答案: