在 AJAX 调用之前加载 HTML 页面？

Question

在我的 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;
  });

对于为什么在 Ajax 调用完成之前加载 HTML 页面并调用 tbe alreadyFriends 函数，我有点困惑。我尝试使用 Promise 来帮助我解决这个问题，我发现

AngularJS: How to execute a controller function AFTER completion of AJAX call in a service?

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

  $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 页面仍会加载。任何想法如何解决这一问题？谢谢！

Answer 1

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

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