javascript - 永远不要同时显示两个 div

Question

我正在开发一个项目，由于 css 文件的加载方式，ng-cloak 不可用，所以我正在寻找一个不太糟糕的解决方案，并尝试了一些不同的方法。

我不想同时显示这两个图标。问题是，由于数据源的 promise 仍在解决，因此底部的一个(右 Angular )会短暂显示。我怎样才能确保这两个图标永远不会同时出现？

  <i class=" fa invalid-data-icon fa-angle-down" ng-hide="vm.hideInvalid"
                           ng-show="vm.data.datasources.length">
 </i>

<i class="fa invalid-data-icon fa-angle-right" ng-show="vm.hideInvalid"
                           ng-hide="vm.data.datasources.length">
</i>

编辑:

从已接受的答案中得出这一点:

<i class=" fa invalid-data-icon fa-angle-down" ng-class="{'rotate-icon':vm.data.datasources[1].length==0 || vm.hideInvalid}"></i>

Answer 1

首先在同一个标​​签中使用 ng-show 和 ng-hide 是一个非常糟糕的主意。

你应该这样做:

<i class=" fa invalid-data-icon fa-angle-down" 
    ng-show="vm.hideInvalid==false && vm.data.datasources.length==0">
</i>

<i class="fa invalid-data-icon fa-angle-right" 
     ng-show="vm.hideInvalid==true && vm.data.datasources.length==0">
</i>

考虑到只要您的 promise 没有兑现，您就会将 hideInvalid 和数据源初始化为未定义。