How can I bind to element height and wathch it on window resize or another event using Angular?

Question

I have two elements .common and .userpanel 1. I need to give to the .userpanel height of common div on load 2. Keep binding on window resize event 3. Keep binding on another event (for example, I increase the height of common div, when I run function to expand child elements)

Answer 1

This directive can help bind height between elements, demo available at https://plnkr.co/edit/hpIlWxP2DbtGgVGdrcbk?p=preview

app.directive('bindTo', function($document, $window) {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {

      if(!attr.bindTo) {
        console.log('bindTo element not defined');
        return;
      }

      var windowElm = angular.element($window), 
        bindToElm = angular.element($document[0].querySelector(attr.bindTo));

      if(!bindToElm) {
        console.log('defined bindTo element ', attr.bindTo, ' not found');
        return;
      }

      windowElm.on('resize', bindHeight);
      scope.on('someEvent', bindHeight);

      bindHeight();

      function bindHeight() {
        var bindToElmHt = bindToElm.height();
        element.css('height', bindToElmHt);
      }
    }
  }; 
});

Usage would be like,

<div class="common">
  Common
</div>
<div class="user-panel" bind-to=".common">
  User Panel
</div>