Direttiva AngularJS: modifica dimensione genitore dell'orologio

Question

Problema

Ho una semplice direttiva che esegue gli aggiornamenti di dimensionamento su un particolare elemento. Questo guarda le dimensioni della finestra e apporta le modifiche di conseguenza.

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(); }); 
    } 
    }; 
}]); 

Questo funziona bene.

Si dà il caso che all'interno del tag div associato, ho un figlio div. Quando il genitore viene ridimensionato, voglio apportare modifiche di posizionamento sull'elemento figlio. Tuttavia, non riesco a far scattare il grilletto.

Questo viene chiamato in fase di avvio, ma non viene attivato quando l'elemento viene ridimensionato o finestra cambia:

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); 
     }); 
    } 
    }; 
}]); 

Che tipo di legame o guardare la configurazione dovrei usare per controllare per il ridimensionamento del genitore elemento?

Fiddle

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

Answer 1

Il valore data.overlaytype si sta osservando nella direttiva centerVertical non è sulla scope in modo che il valore risultante è undefined e questo valore non cambia mai è per questo che non si ottengono l'ascoltatore eseguito. Per controllare se la dimensione dell'elemento genitore è cambiato è possibile verificare nella funzione $ orologio come questo:

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

ricordare Inoltre, quando si desidera utilizzare un modulo già esistente non si può chiamare in questo modo angular.module('myModule', []) perché questo significa creare un nuovo modulo. Devi solo passare il nome del modulo angular.module('myModule'), che è la seconda cosa per cui il tuo codice non ha funzionato.