javascript AngularJS 指令观察父尺寸变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29303200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS directive watch parent size change
提问by el n00b
Problem
问题
I have a simple directive that executes sizing updates on a particular element. This watches the window size and makes adjustments 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 happens here
}, true);
w.bind('resize', function() { scope.$apply(); });
}
};
}]);
This works just fine.
这工作得很好。
It just so happens that inside of the divtag that is associated with, I have a child div. When the parent is resized, I want to make positioning alterations on the child element. However, I cannot get the trigger to fire.
碰巧在div与之关联的标签内部，我有一个 child div。当父元素调整大小时，我想对子元素进行定位更改。但是，我无法触发触发器。
This gets called at startup, but does not get triggered when the element is resized or the window changes:
这在启动时被调用，但在元素调整大小或窗口更改时不会被触发：
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 type of binding or watch configuration should I be using to check for resizing of the parent element?
我应该使用什么类型的绑定或监视配置来检查父元素的大小调整？
Fiddle
小提琴
回答by getOffMyLawn
The value data.overlaytypeyou are observing in the centerVerticaldirective is not on the scopeso the resulting value is undefinedand this value never changes that's why you dont get the listener executed.
To check if the size of the parent element changed you can check it in the $watch function like this:
该值data.overlaytype您在所观察centerVertical指令是不是对scope这样的结果值undefined，该值永远不会改变，这就是为什么你没得到听众执行。要检查父元素的大小是否更改，您可以在 $watch 函数中检查它，如下所示：
scope.$watch(
function () {
return {
width: element.parent().width(),
height: element.parent().height(),
}
},
function () {}, //listener
true //deep watch
);
Moreover remember, when you want to use an already existing module you can't call it like this angular.module('myModule', [])because this mean creating new module. You have to just pass the module name angular.module('myModule'), which is second thing why your code didn't work.
此外请记住，当您想使用已经存在的模块时，您不能这样调用它，angular.module('myModule', [])因为这意味着创建新模块。您必须只传递模块名称angular.module('myModule')，这是您的代码不起作用的第二件事。
