Question

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

我从不想同时展示这两个图标。问题是，由于数据源的承诺仍在解决，因此底部（右角）会短暂显示。如何确保这两个图标不会一次显示？

  <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>

考虑到只要你的承诺没有转发，你就会将hideInvalid和datasources初始化为undefined。

Answer 2

替代方法：只在代码中使用一个图标，并使用css类旋转它：

<i class=" fa invalid-data-icon fa-angle-down" ng-class={'rotate-icon':!!vm.data.datasources.length}></i>

（我的角色技能有点生疏，但是你得到了这个......）

然后在你的CSS中，像这样：

.rotate-icon {
  transform: rotate(-90deg)
}

永远不要同时显示两个div

2 个答案: