问题
我有一个简单的指令,执行特定元素的大小更新.这会监视窗口大小并相应地进行调整.
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',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);
});
}
};
}]);
我应该使用什么类型的绑定或监视配置来检查父元素的大小调整？
小提琴
解决方法
您在centerVertical指令中观察到的值data.overlaytype不在作用域上,因此结果值是未定义的,并且此值永远不会改变,这就是您不执行侦听器的原因.
要检查父元素的大小是否已更改,您可以在$watch函数中检查它,如下所示：
要检查父元素的大小是否已更改,您可以在$watch函数中检查它,如下所示：
scope.$watch(
function () {
return {
width: element.parent().width(),height: element.parent().height(),}
},function () {},//listener
true //deep watch
);
此外,请记住,当你想使用一个已经存在的模块时,你不能像这个angular.module(‘myModule’,[])那样调用它,因为这意味着创建新模块.你必须传递模块名称angular.module(‘myModule’),这是你的代码无法工作的第二个原因.
