时间戳

首页 > 解决方案 > 我们可以延迟 angularjs 中的渲染，直到所有变量都从回调中获取所需的值

angularjs - 我们可以延迟 angularjs 中的渲染，直到所有变量都从回调中获取所需的值

问题描述

更新

1- IsShopToShowTerminated返回 true，这是预期的，但值不会反映在视图中。

我已经共享了 angularjs 代码。总是有IsShopToShowTerminated未定义的并且没有描述所需的值。

我认为问题在于，它首先呈现，然后IsShopToShowTerminated改变了值。搜索后我越来越困惑。

$scope.IsShopToShowTerminated = function(shopTerminationDate) {
  setTimeout(function() {
      debugger;
      if ($scope.IsTerminated($scope.viewCompany.TerminationDate)) {
        return true;
      } else {
        return $scope.IsTerminated(shopTerminationDate);
      }
    },
    0);
}
<td ng-init="isTerminatedValue = IsShopToShowTerminated(shop.TerminatinonDate)">
  {{isTerminatedValue}}
  <div ng-show="isTerminatedValue">
    <i class="fa fa-circle text-danger"></i>
    <small>Terminated</small>
  </div>

  <div ng-show="isTerminatedValue">
    <i class="fa fa-circle text-success"></i>
    <small>Active</small>
  </div>
</td>

标签： angularjscallbackrenderingng-init

解决方案

您可以通过添加一个 ngIf 指令来延迟渲染，该指令将检查 isTerminatedValue 的值是否未定义。

<td ng-init="isTerminatedValue = IsShopToShowTerminated(shop.TerminatinonDate)">
    <div ng-if="isTerminatedValue">
        {{isTerminatedValue}}
        <div ng-show="isTerminatedValue">
            <i class="fa fa-circle text-danger"></i>
            <small>Terminated</small>
        </div>
        <div ng-show="isTerminatedValue">
            <i class="fa fa-circle text-success"></i>
            <small>Active</small>
        </div>
    </div>  
</td>

推荐阅读