AngularJS 指令手表 parent 尺寸变化

Question

问题

我有一个简单的指令可以对特定元素执行尺寸更新。这会监视 window 大小并相应地进行调整。

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 标签内，我有一个 child div。调整 parent 大小时，我想对 child 元素进行定位更改。但是，我无法触发触发器。

这会在启动时调用，但不会在调整元素大小时或 window 更改时触发：

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

我应该使用什么类型的绑定或监视配置来检查 parent 元素的大小调整？

Fiddle

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

Answer 1

您在 centerVertical 指令中观察到的值 data.overlaytype 不在 scope 上，因此结果值为 undefined 并且此值永远不会改变，这就是为什么您不要执行侦听器。要检查父元素的大小是否更改，您可以在 $watch 函数中检查它，如下所示：

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

此外请记住，当您想使用一个已经存在的模块时，您不能这样调用它 angular.module('myModule', []) 因为这意味着创建新模块。您必须只传递模块名称 angular.module('myModule')，这是您的代码无法运行的第二件事。

AngularJS 指令手表 parent 尺寸变化

AngularJS directive watch parent size change

javascript

angularjs

angular-directive

问题

Fiddle