Issue
I am facing a challenge with a directive that updates the size of an element based on the window size. The directive monitors changes in window dimensions and adjusts the element accordingly.
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 logic here
}, true);
w.bind('resize', function() { scope.$apply(); });
}
};
}]);
The implementation works correctly as expected.
In my code, I have a parent div element with a child div. I aim to adjust the position of the child element when the parent is resized. However, I am unable to trigger the necessary actions for this.
Despite being called initially, the following code does not respond to resizing events:
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);
});
}
};
}]);
What kind of binding or watch configuration should be used to detect resizing of the parent element?