Question

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

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

在我的指令的链接功能中，我想注册以了解元素的宽度何时改变，比如用户启动的浏览器窗口调整大小。

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

    // Do other stuff
});

我正在使用Bootstrap的“容器流体”和“行 - 流”类，因此在视觉上，元素会按预期动态调整大小。但是，我为DOM的“调整大小”事件设置的绑定似乎永远不会触发。我已经证实“元素”确实是预期的元素。

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

我错过了什么吗？

Answer 1

只能（没有jQuery插件）将$window绑定到resize()方法，但这并不意味着无法在窗口大小调整时显示元素的维度（）。这是一个将$window绑定到resize()的指令，然后更新视图以显示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的实时视图中，使用渲染视图调整窗格大小以查看窗口大小更新。）

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

Answer 2

如果您引用完整的jquery，那么您有一些有趣的选项。

我已经分叉了rGils plunker以显示差异。 http://plnkr.co/edit/r6i3Y7tXeWNCp1r3LvYq?p=preview

基本上，您可以使用此语法来获得所需内容：

var resizeHandler = function(){
    //code goes here.
    //added as a var instead of inline so it can be turned off later.
};
$(window).on('resize.sizer', resizeHandler);

'resize'是事件，'sizer'是你的指示。

此外，根据您在此处和您的应用程序的位置，您可能希望删除此事件处理程序...如果您的指令是ng-if'd out，那么您应该添加：

scope.$on('$destroy', $(window).off('resize.resizer', resizeHandler);

如何从Angular Directive订阅以通知Resize事件？

2 个答案: