CODEWITHSUNDEEP
javascriptjqueryhttpangularjs
zlog
zlog

Reputation: 3316

How do I get the height of an element after it is populated by angularjs?

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?

Upvotes: 3

Views: 5072

Answers (1)

joakimbl
joakimbl

Reputation: 18081

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

Upvotes: 7

Related Questions