How can I snap to the height of an element and wathch it when resizing a window or in another event using Angular?

Question

I have two .common and .userpanel elements 1. I need to specify the height of the .serpanel of the common div at boot 2. Keep binding to the window resize event 3. Keep the binding to another event (for example, I increase the height of the general div when I run function for expanding children)

Answer 1

This directive can help to relate the height between the elements, the demo version is 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);
      }
    }
  }; 
});

Use will be such

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

Answer 2

javascript element dimensions.

: detect-element-resize

, .

Answer 3

, $watch(). . $window.

. . , .

angular
  .module('myApp', [])
  .directive('getHeight', function() {
    return {
      controller: ['$attrs', '$element', '$scope', '$window',
        function($attrs, $element, $scope, $window) {
          ///////////////
          // Variables //
          ///////////////

          // Used to create a debounced function
          var resizeTimeout;
          var scopeVariableName = $attrs.getHeight;

          ///////////////
          // Run block //
          ///////////////

          angular.element($window).bind('resize', onResize);
          $scope.$on('$destroy', function() {
            angular.element($window).unbind('resize', onResize);
          });

          $scope.$watch(getElementHeight, function(newValue) {
            $scope[scopeVariableName] = newValue;
          });

          ///////////////
          // Functions //
          ///////////////

          function getElementHeight() {
            return $element[0].clientHeight;
          }

          function onResize() {
            // setTimeout is used rather than $timeout as this doesn't trigger
            // a new digest cycle. we trigger a digest cycle only if needed.
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function() {
              var elementHeight = getElementHeight();
              if ($scope[scopeVariableName] === elementHeight) {
                // The 2 values are identical. There no need for a digest cycle
              } else {
                $scope.$evalAsync(function() {
                  $scope[scopeVariableName] = elementHeight;
                });
              }
            }, 50);
          }
        }
      ],
      scope: false,
      restrict: 'A'
    }
  });

html,
body {
  height: 100%;
  margin: 0;
}
body {
  padding: 50px;
}
.common-style {
  color: #ffffff;
  font-family: sans-serif;
  font-size: 30px;
  width: 30%;
}
#parent {
  background: blue;
  margin: 2.5% 0;
  height: 30%;
}
#child {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div ng-app="myApp" style="height: 100%;">
  <label>Custom parent height:</label>
  <input type="number" ng-model="explicitParentHeight">
  <div>If nothing is written here, then the blue div will have a height of 30%</div>
  <div id="parent" class="common-style" get-height="parentHeight" ng-style="{height: explicitParentHeight + 'px'}">PARENT</div>
  <div id="child" class="common-style" ng-style="{height: parentHeight + 'px'}">CHILD - height: {{ parentHeight }}</div>
</div>

Hide result