AngularJS - Simple Directive Use

fix child element height

by klode

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-app="myApp">
    <dynamic-height data="[1,2,3,4]"></dynamic-height>
</div>

CSS

.child-element {
  height: 200px;
  width:100%;
  border: 1px black solid;
}

JavaScript

angular.module('myApp', [])

.directive('dynamicHeight', 
    function() {
      return {
        restrict: 'EAC',
        template: '<div class="child-element" ></div>',
        scope:{
        	data: '='
        },
        link: function(scope, element, attrs) {
        var n = 20;
        var height = scope.data.length * n;
        element.children('.child-element').css('height', height).html('(height = data.length * n) -- height = ' + height);
          console.log(element[0].querySelector('.child-element'))
        }
      };
    }
  );