HTML页面在AJAX调用之前加载

HTML Page loads before AJAX call?

本文关键字：加载 调用 AJAX HTML      更新时间：2023-09-26

在我的HTML页面中，我有一个button标记，看起来像这样：

<button ng-hide="alreadyFreinds()" type="button" class="btn btn-primary btn-lg">Friend</button>

然而，当我尝试访问下面显示的alreadyFriends函数的某些部分时，我得到一个错误，说TypeError: Cannot read property 'length' of undefined

  $scope.alreadyFreinds = function(){
    for(var i = 0; i < $scope.user.friends.length; i++){
      if($scope.user.friends[i].username === $scope.realUserViewing.username && 
        $scope.user.friends[i].requested == true && $scope.user.friends[i].pending == true){
        return true;
      }
    }
  };

然而，令人困惑的是，我已经在这个函数上面的几行中定义了$scope.user.friends和$scope.user，如下所示：

  $http.get('/api/users/me')
    .then(function(result){
      $scope.user = result.data;
  });

我有点困惑，为什么HTML页面在Ajax调用完成之前加载并调用tbe alreadyFriends函数。我试图用承诺来帮助我解决这个问题，我找到了

AngularJS：在服务中完成AJAX调用后，如何执行控制器函数？

但这对我没有太大帮助，因为当我做时

  $http.get('/api/users/me')
    .then(function(result){
      var deferred = $q.defer();
      $scope.user = result.data;
      deferred.resolve($scope.alreadyFreinds);
      return deferred.promise;
  });

这确实起了作用，但在AJAX调用完成之前，HTML页面仍然会加载。有什么办法解决这个问题吗？谢谢

    <button ng-hide="alreadyFreinds()" 
     ng-if="user.length > 0"
     type="button" class="btn btn-primary btn-lg">Friend</button>

通过设置ng-if，您的按钮将可见，并且当您的http调用响应返回时，您的alreadyFreinds()将被触发。

相关文章：