AngularJS yönerge izlemek üst boyut değişikliği

Question

Sorun

Belirli bir öğede boyutlandırma güncellemelerini yürüten basit bir yönergeye sahibim. Bu pencere boyutunu izler ve buna göre ayarlamalar yapar.

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

Bu, gayet güzel çalışıyor.

Sadece div etiketi ile ilişkili olan div numaralı bir çocuğum var. Ebeveyn yeniden boyutlandırıldığında, alt öğe üzerinde konumlandırma değişiklikleri yapmak istiyorum. Ancak, tetikleyiciyi ateş edemiyorum.

Bu başlangıçta çağrılan, ancak eleman resized veya pencere değişiklikleri olduğunda tetiklenen almaz:

Ben ebeveynin yeniden boyutlandırma kontrol etmek için kullanıyor olmalıdır bağlama ne tür ya da seyretmek yapılandırma

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

eleman? scope yüzden çıkan değer undefined ve bu değer asla idam dinleyici alamadım bu yüzden değişiklikleri üzerinde

Fiddle

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

Answer 1

Eğer centerVertical yönergede gözlemliyoruz data.overlaytype değeri değil. Eğer böyle diyemezsin mevcut bir modülü kullanmak istediğinizde

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

Dahası, unutma: ebeveyn elemanın büyüklüğü böyle $ izle fonksiyonunda kontrol edebilirsiniz değişirse kontrol etmek için angular.module('myModule', []), çünkü bu yeni modül oluşturulduğu anlamına geliyor. Kodunuzun çalışmadığı ikinci şey olan angular.module('myModule') modül adını geçmeniz gerekiyor.