AngularJS chỉ thị đồng hồ mẹ thay đổi kích thước

Question

Vấn đề

Tôi có một chỉ thị đơn giản mà thực hiện kích thước thông tin cập nhật trên một yếu tố cụ thể. Điều này đồng hồ kích thước cửa sổ và điều chỉnh cho phù hợp.

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

Điều này chỉ hoạt động tốt.

Nó chỉ xảy ra bên trong thẻ div được liên kết với, tôi có con div. Khi cha mẹ được thay đổi kích thước, tôi muốn thực hiện thay đổi vị trí trên phần tử con. Tuy nhiên, tôi không thể kích hoạt lửa.

này được gọi lúc khởi động, nhưng không được kích hoạt khi nguyên tố này được thay đổi kích cỡ hoặc những thay đổi cửa sổ:

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

Loại ràng buộc hoặc xem cấu hình tôi nên sử dụng để kiểm tra các thay đổi kích thước của phụ huynh thành phần?

Fiddle

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

Answer 1

Giá trị data.overlaytype bạn đang quan sát trong chỉ thị centerVertical không nằm trên scope nên giá trị kết quả là undefined và giá trị này không bao giờ thay đổi đó là lý do tại sao bạn không nhận được người nghe thực hiện. Để kiểm tra xem kích thước của phần tử cha mẹ thay đổi bạn có thể kiểm tra xem nó trong hàm $ đồng hồ như thế này:

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

Hơn nữa nhớ, khi bạn muốn sử dụng một mô-đun đã tồn tại bạn không thể gọi nó như thế này angular.module('myModule', []) vì điều này có nghĩa là tạo mô-đun mới. Bạn chỉ cần chuyển tên mô-đun angular.module('myModule'), đây là điều thứ hai khiến mã của bạn không hoạt động.