title: AngularJS - bind to directive resize
body: <p>How can i be notified when a directive is resized?
  i have tried </p>
  
  <pre><code>element[0].onresize = function() {
              console.log(element[0].offsetWidth + " " + element[0].offsetHeight);
          }
  </code></pre>
  
  <p>but its not calling the function</p>
  
  <pre><code>(function() {
  'use strict';
  
  // Define the directive on the module.
  // Inject the dependencies. 
  // Point to the directive definition function.
  angular.module('app').directive('nvLayout', ['$window', '$compile', layoutDirective]);
  
  function layoutDirective($window, $compile) {
      // Usage:
      // 
      // Creates:
      // 
      var directive = {
          link: link,
          restrict: 'EA',
          scope: {
              layoutEntries: "=",
              selected: "&amp;onSelected"
          },
          template: "&lt;div&gt;&lt;/div&gt;",
          controller: controller
      };
      return directive;
  
      function link(scope, element, attrs) {
          var elementCol = [];
  
          var onSelectedHandler = scope.selected();
  
          element.on("resize", function () {
              console.log("resized.");
          });
  
          $(window).on("resize",scope.sizeNotifier);
  
          scope.$on("$destroy", function () {
              $(window).off("resize", $scope.sizeNotifier);
          });
  
          scope.sizeNotifier = function() {
              alert("windows is being resized...");
          };
  
          scope.onselected = function(id) {
              onSelectedHandler(id);
          };
  
  
  
          scope.$watch(function () {
              return scope.layoutEntries.length;
          },
          function (value) {
              //layout was changed
              activateLayout(scope.layoutEntries);
          });
  
          function activateLayout(layoutEntries) {
  
  
              for (var i = 0; i &lt; layoutEntries.length; i++) {
  
                  if (elementCol[layoutEntries[i].id]) {
                      continue;
                  }
                  var div = "&lt;nv-single-layout-entry id=slot" + layoutEntries[i].id + " on-selected='onselected' style=\"position:absolute;";
                  div = div + "top:" + layoutEntries[i].position.top + "%;";
                  div = div + "left:" + layoutEntries[i].position.left + "%;";
                  div = div + "height:" + layoutEntries[i].size.height + "%;";
                  div = div + "width:" + layoutEntries[i].size.width + "%;";
                  div = div + "\"&gt;&lt;/nv-single-layout-entry&gt;";
  
                  var el = $compile(div)(scope);
                  element.append(el);
                  elementCol[layoutEntries[i].id] = 1;
              }
  
  
          };
      }
  
      function controller($scope, $element) {
  
      }
  }
  
        })();
  </code></pre>