在同一个DOM元素上使用ng-show和ng-hide是否正确？

Question

我想知道在同一个DOM元素上使用ng-show和ng-hide是否是一个好习惯.

这似乎是一个更好的主意,而不是在单个ng-show中使用多个条件,其中一些条件否定了.

让我知道.谢谢!

PS:这里有一个例子

<div ng-show="isBlonde" ng-hide="hasBlueEye">Mary is blonde and she has green eyes</div>

Answer 1

绝对不.

首先,这两个指令可以相互跳过(参见JSFiddle,由Joel Skrepnek提供),并且通常只是糟糕的设计.

您可以使用函数,另一个字段或仅使用一些内联逻辑.

内嵌逻辑:

<div ng-show="isBlonde && !hasBlueEye">Mary is blonde and she has green eyes</div>

领域:

<div ng-show="shouldShowThisDiv">Mary is blonde and she has green eyes</div>

功能

<div ng-show="shouldShowThisDiv()">Mary is blonde and she has green eyes</div>

$scope.shouldShowThisDiv = function(){
    return $scope.isBlonde && !$scope.hasBlueEye;
}

如果需要检查的值超过2个,我建议使用其他字段或函数.

Answer 2

使用一个但不是两个.选择使表达式最具可读性的那个.

否则你最终会得到:

<div ng-show='true' ng-hide='true'></div>