dom - 如何从 Angular 指令订阅以接收调整大小事件的通知？

Question

我有一个通过 Bootstrap 调整大小并使用我的自定义指令 myDirective1 进行注释的元素:

<div class="span4" myDirective1>Hello, world</div>

在我的指令的链接函数中，我想注册以了解元素的宽度何时发生变化，例如，用户启动的浏览器窗口调整大小。

element.bind("resize", function() {
    console.log("Resized");

    // Do other stuff
});

我正在使用 Bootstrap 的“container-fluid”和“row-fluid”类，因此从视觉上看，元素正在按预期动态调整大小。但是，我为 DOM 的“调整大小”事件设置的绑定(bind)似乎永远不会触发。我已经验证“元素”确实是有问题的预期元素。

我在没有完整的 jQuery 的情况下这样做，所以它只是使用 Angular 的 JQLite。

我错过了什么吗？

Answer 1

只可能(没有 jQuery 插件)将 $window 绑定(bind)到 resize() 方法，但这并不意味着它不能显示窗口 resize() 上元素的尺寸。这是一个将 $window 绑定(bind)到 resize() 的指令，然后更新 View 以显示 dom 元素的新宽度:

app.directive('sizer', function($window){
  return {
  controller: function($scope){
    $scope.inputSize = '?'
  },
  template: '<input type="text" style="width:80%">' +
            '<br/>' +
            'Input Size = {{inputSize}}',

  link: function(scope, element) {
    var w = angular.element($window);
    var size = element.find('input')[0].clientWidth;

    scope.inputSize = size;

    w.bind('resize', function(){
      scope.inputSize = element.find('input')[0].clientWidth;
      scope.$apply();

    })
  }
}

和here's the plunk . (在 plunker 的实时 View 中，使用渲染 View 调整 Pane 大小以查看窗口大小更新。)

此外，我在上面的评论中是不正确的 - resize() 被烘焙到 angularjs 中。