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，因此应该隐藏。这在页面加载时按预期工作（第一个跨度显示，其他两个被隐藏）。但是当我检查跨度 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 以确保函数返回正确的真假。但是，我的 HTML DOM 没有任何变化，跨度仍然隐藏。

我对此感到头疼，并且已经没有想法了......非常感谢任何帮助！

Answer 1

您正在使用双括号进行插值。但是ng-show 不是插入值的指令，它是基于真/假的。因此，您需要一个功能，到目前为止一切都很好。但在 Angular 1.x 中，传递函数的指令不带双括号。

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

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

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

Answer 2

当您将函数包含在{{}} 中时，它只会在第一次解析为 false（或任何初始值），因为这就是表达式语法的用途。 ng-show/ng-hide 期望的表达式是 true 或 false，因此最好使用根据条件在内部更改的函数或变量。

请参阅下面的示例以供参考。

function TodoCtrl($scope) {
  $scope.id;
  
  $scope.showHideBasedOnFlag = function(id) {
    var flag = getFlag(id);
    if (flag == 1) return true;
    if (flag == -1) return false;
    return true;
  }

  function getFlag(id) {
    return id; // just simulation
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <h2>Todo</h2>
  <input placeholder="Enter 1 to show -1 to hide" ng-model="id">
  <div ng-controller="TodoCtrl">
    <span class='span_class' ng-show='showHideBasedOnFlag(id)'>
  ...data...
</span>
  </div>
</div>