javascript - Angular ng-show 不根据函数返回值显示/隐藏

Question

所以我的 Angular 应用程序是一个庞然大物，所以我将相关部分粘贴到这里只是为了看看 SO 的 Angular Gurus 是否能发现任何可以帮助我的东西。

我的 HTML 代码如下:

<span class='span_class' ng-show='{{showHideBasedOnFlag(id)}}'>
  ...data...
</span>

在 Angular 中我有:

$scope.showHideBasedOnFlag = function(id)
{

   var flag = getFlag(id);
   if(flag == 1) return true; 
   if(flag == -1) return false;
   return true;
}

我有三个跨度，其中第一个的标志为 1，因此应显示，另外两个的标志为 -1，因此应隐藏。这在页面加载时按预期工作(第一个跨度显示，其他两个隐藏)。但是当我检查 span 2 和 3 时，它们的 HTML 代码如下所示:

<span class='span_class ng-hide' ng-show="false">

所以我的第一个问题是:ng-hide 被 Angular 添加以及 ng-show 也存在是否正常？当我的 HTML 中有代码 ng-show='{{showHideBasedOnFlag(id)}}'

时，两者都会被添加

其次，也是更重要的一点:我有一个按钮，单击该按钮时，会将跨度 2 和 3 的标志更新为 1 的值。发生这种情况后，我希望显示跨度，但没有显示。然后我显式调用了 showHideBasedOnFlag 函数和 console.logged 以确保该函数返回正确的 true 和 false。但是，我的 HTML DOM 没有变化，跨度仍然隐藏。

我为此伤透了脑筋，已经没有想法了......非常感谢任何帮助!!

Answer 1

您正在使用双括号进行插值。但是 ng-show 不是插入值的指令，它是基于 truthy/falsy 的。因此，您需要一个功能，到目前为止还不错。但是在 Angular 1.x 中，传递给函数的指令没有双括号。

<span class='span_class' ng-show='showHideBasedOnFlag(id)'>
  ...data...
</span>

So my first question is: Is it normal for ng-hide to get added by Angular as well as for ng-show to be also present? Both are getting added when I have the code ng-show='{{showHideBasedOnFlag(id)}}' in my HTML

是的，这是正常行为，因为 ng-show 和 ng-hide 是使用元素可见性属性的互补开关，而 ng-if 完全从 DOM 添加或删除元素。