HTML頁面是否在AJAX調用之前加載？

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;
  });

我對為什么HTML頁面在Ajax調用完成之前加載並調用tbe yetFriends函數感到困惑。 我試圖用承諾來幫助我解決這個問題，我發現

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頁面仍然加載。 任何想法如何解決這一問題？ 謝謝！

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() 。