Angular JS：ng-switch on boolean不工作

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}} ， {{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 user. authenticated

Answer 2

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

.directive('accountItem', function () {
    return {
        ...
        priority: 900,
        ...
    };
});