I'm doing a $http.get to get json data, which is then used to populate the views with something like

$scope.getIdeas = function() {
  $http.get(ideasUrl)
    .success(function(data) {
      $scope.ideas = data;
      console.log($(".ideas-list").height()); // No height yet =(
    })
};

This then populates the view

<ul ng-cloak class="ideas-list" ng-init="getIdeas()">
  <li class="idea"
    ng-repeat="idea in ideas"
    >{{idea.text}}</li>
</ul>

However, on the success call, the .ideas-list doesn't have a height yet. Where would I be able to get the populated view height? Is there an event I can hook into?

I'm doing a $http.get to get json data, which is then used to populate the views with something like

$scope.getIdeas = function() {
  $http.get(ideasUrl)
    .success(function(data) {
      $scope.ideas = data;
      console.log($(".ideas-list").height()); // No height yet =(
    })
};

This then populates the view

<ul ng-cloak class="ideas-list" ng-init="getIdeas()">
  <li class="idea"
    ng-repeat="idea in ideas"
    >{{idea.text}}</li>
</ul>

However, on the success call, the .ideas-list doesn't have a height yet. Where would I be able to get the populated view height? Is there an event I can hook into?

• javascript
• jquery
• http
• angularjs

• -1 for mixing jQuery with Angular, making the question and answer more than a little misleading. Best practice for Angular is to not mix jQuery with it as it's antithetical to the Angular model and it's "not the Angular way" - reason being that jQuery works on the DOM directly which conflicts with the fact that in Angular the DOM is generated by a render engine which can conflict (often in bad/bizarre/unpredictable ways). I'd like to see a solution in pure Angular rather than mixed Angular/jQuery. – tpartee Commented Aug 3, 2017 at 3:07

1 Answer 1

Use setTimeout (or preferably the $timeout service) so that Angular can change the dom before you check the height:

$scope.getIdeas = function() {
  $http.get(ideasUrl)
    .success(function(data) {
      $scope.ideas = data;
      $timeout(function(){
        console.log($(".ideas-list").height());
      });
  })
};