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

admin管理员组

文章数量:1377570

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

Share Improve this question Follow edited May 30, 2013 at 14:37 Bas Slagter 9,92799 gold badges4949 silver badges7878 bronze badges asked May 30, 2013 at 14:29 zlogzlog 3,31655 gold badges4343 silver badges8282 bronze badges 1

• -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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptHow do I get the height of an element after it is populated by angularjsStack Overflow