我有一个简单的指令,可以对特定元素执行大小调整更新。这会监视窗口大小并相应地进行调整。
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(); });
}
};
}]);
这很好用。
恰好在与div
标签相关联的内部,我有一个孩子div
。调整父级的大小时,我想对子元素进行定位更改。但是,我无法触发。
这会在启动时调用,但在调整元素大小或窗口更改时不会触发:
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);
});
}
};
}]);
我应该使用哪种类型的绑定或监视配置来检查父元素的大小调整?
答案 0 :(得分:10)
您在data.overlaytype
指令中观察到的值centerVertical
不在scope
上,因此结果值为undefined
,此值永远不会改变scope.$watch(
function () {
return {
width: element.parent().width(),
height: element.parent().height(),
}
},
function () {}, //listener
true //deep watch
);
为什么你没有让听众执行。
要检查父元素的大小是否已更改,您可以在$ watch函数中检查它,如下所示:
angular.module('myModule', [])
此外,请记住,当您想要使用现有模块时,您无法像angular.module('myModule')
那样调用它,因为这意味着创建新模块。您必须传递模块名称{{1}},这是您的代码无法工作的第二个原因。