Get height of a element in ui-view

Question

I have a state that can have a variable height (depending on the content). I want to set that height as a css attribute for my background-color.

But I'm having trouble getting the correct height because the code fires before the content is loaded in the state.

I have this state,

$stateProvider
  .state('home.suggestions', {
    url: '',
    views: {
      "suggestions": {
        templateUrl: '../assets/angular-app/templates/_suggestions.html',
        controller: function(){
          showHeight = $('.suggestions-container-wrapper').outerHeight();
          console.log(showHeight)
        }
      },

    },
  })

But it always returns 175 (the height of the element before it loads the ng-repeat content.

How do I run the code after the all the calls are done?

I would probably create a directive for this and put it on the top level of your template — aw04, Jan 22 '16 at 14:09

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Just found a simple solution. But a ng-init after the ng-repeat element, then it fires the function when it gets triggerd.

https://stackoverflow.com/a/24817862/848706

%div{"ng-init" => "setHeight()"}

Controller,

$scope.setHeight = function (){
  $timeout(function(){
      showHeight = $('.suggestions-container-wrapper').outerHeight();
      console.log(showHeight)
    }, 0);

}

edited May 23 '17 at 11:52

Community

1
1

answered Jan 22 '16 at 14:09

alucardu

129
3
13

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

Check out the docs on $viewContentLoaded. You might be able to do:

controller: function(){
    $scope.$on('$viewContentLoaded', function(){
        showHeight = $('.suggestions-container-wrapper').outerHeight();
        console.log(showHeight)
    });
}

Here is also another post that discusses it.

edited May 23 '17 at 11:52

Community

1
1

answered Jan 22 '16 at 14:10

Chewpers

2,430
5
23
30

Get height of a element in ui-view

2 Answers2