Vertical progress bar in angular.js not showing proper height

Question

I am trying to create my own vertical progress bar, and am thinking of animating it via CSS3. I have currently set it up as a angular directive, where upon clicking, it should change the height property of the inner div. However, when I console.log(element.children().css('height')), it is returning me a blank value, even though I have already set the initial height to 10%?

angular.js directive

teacherApp.directive('clickToChangeHeight', function(){
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        var height = element.children().css('height');
        console.log(height)
        //element.children().css('height', finalHeight);
      });
    }
  }
})

jade markup

div(ng-controller='TvCtrl')
  .outer(click-to-change-height)
    .inner

CSS

.outer {
  position: relative;
  overflow: hidden;
  width: 30px;
  height: 140px;
  border: 2px solid #ccc;
}

.inner {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  width: 100%;
  height: 10%;
  background-color: #999;
  -webkit-transition: height 2s;
}

score 1 · Accepted Answer · answered Jun 14 '13 at 03:12

if you don't include jquery, angularJS use jquery lite by default. You can find how jquery lite implement the css function in the source code here (line 405). As it shows, when you don't pass the "value" parameter to the function, it just returns what it finds in the style attribute of the element:

val = val || element.style[name];

that means if you have set the style attribute of .inner

<div class="inner style="height:30px"> </div>

then you will get 30px to be printed out in console.log, but if you haven't it won't find the height value you set in the css file.

However, i think what you want is use the css function to set the height instead of just printing, and just use

element.children().css('height', finalHeight)

as you thought will be fine to set the style as you wanted. Since now the css function is the setter and will set "height" of the style attribute of inner to be finalHeight

Thanks for the answer. What should I do if I want to get the css value? — Dan Tang, Jun 14 '13 at 03:54
you can use getComputedStyle() as pointed out here http://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript — Eric, Jun 14 '13 at 04:02

Vertical progress bar in angular.js not showing proper height

1 Answers1