AngularJS - bind to directive resize

Question

How can i be notified when a directive is resized? i have tried

element[0].onresize = function() {             console.log(element[0].offsetWidth + " " + element[0].offsetHeight);         } 

but its not calling the function

(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: "&onSelected"         },         template: "<div></div>",         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 < layoutEntries.length; i++) {                  if (elementCol[layoutEntries[i].id]) {                     continue;                 }                 var div = "<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 + "\"></nv-single-layout-entry>";                  var el = $compile(div)(scope);                 element.append(el);                 elementCol[layoutEntries[i].id] = 1;             }           };     }      function controller($scope, $element) {      } }        })(); 

Answer 1

Use scope.$watch with a custom watch function:

scope.$watch(   function () {     return [element[0].offsetWidth, element[0].offsetHeight].join('x');   },   function (value) {     console.log('directive got resized:', value.split('x'));   } )