AngularJS-Richtlinie watch übergeordnete Größenänderung

Question

Problem

Ich habe eine einfache Direktive, die Sizing-Updates für ein bestimmtes Element ausführt. Dies überwacht die Fenstergröße und nimmt entsprechende Anpassungen vor.

MyApp.directive('resizeTest', ['$window', function($window) { 
    return { 
    restrict: 'AC', 
    link: function(scope, element) { 
     var w = angular.element($window); 
     scope.$watch(function() { 
     return { 'h': w.height(), 'w': w.width() }; 
     }, function(newValue, oldValue) { 
     // resizing happens here 
     }, true); 
     w.bind('resize', function() { scope.$apply(); }); 
    } 
    }; 
}]); 

Das funktioniert gut.

Es passiert einfach, dass innerhalb der div Tag, der zugeordnet ist, habe ich ein Kind div. Wenn die Größe des übergeordneten Elements geändert wird, möchte ich am untergeordneten Element Positionierungsänderungen vornehmen. Allerdings kann ich den Auslöser nicht auslösen.

Dies wird beim Start aufgerufen, aber nicht ausgelöst werden, wenn das Element oder die Fenster Änderungen der Größe geändert wird:

MyApp.directive('centerVertical', ['$window', function($window) { 
    return { 
    restrict: 'AC', 
    link: function(scope, element) { 
     element.css({border: '1px solid #0000FF'}); 
     scope.$watch('data.overlaytype', function() { 
     $window.setTimeout(function() { 
      console.log('I am:  ' + element.width() + 'x' + element.height()); 
      console.log('Parent is: ' + element.parent().width() + 'x' + element.parent().height()); 
     }, 1); 
     }); 
    } 
    }; 
}]); 

Welche Art von Bindung oder schaut Konfiguration soll ich zum Ändern der Größe der Eltern zu überprüfen, verwenden Element?

Fiddle

https://jsfiddle.net/rcy63v7t/1/

Answer 1

Der Wert data.overlaytype Sie in der centerVertical Richtlinie beobachten ist nicht auf die scope so der resultierende Wert undefined und dieser Wert ändert sich nie, das ist, warum Sie die ausgeführt Hörer nicht bekommen. Um zu überprüfen, ob die Größe des übergeordneten Elements geändert Sie es in der $ Uhr Funktion wie folgt überprüfen:

scope.$watch(
    function() { 
     return { 
      width: element.parent().width(), 
      height: element.parent().height(), 
     } 
    }, 
    function() {}, //listener 
    true //deep watch 
); 

Darüber hinaus denken Sie daran, wenn Sie ein bereits vorhandenes Modul verwenden möchten Sie es so nicht nennen angular.module('myModule', []), weil dies bedeutet, neues Modul zu erstellen. Sie müssen nur den Modulnamen angular.module('myModule') übergeben, was die zweite Sache ist, warum Ihr Code nicht funktioniert hat.