3

我有一个通过 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 的“resize”事件设置的绑定似乎永远不会触发。我已经验证了“元素”确实是有问题的预期元素。

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

我错过了什么吗？

4

2 回答 2

4

只能（没有 jQuery 插件）绑定$window到该resize()方法，但这并不意味着不能在窗口 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();

    })
  }
}

这是 plunk。（在 plunker 的实时视图中，使用渲染视图调整窗格大小以查看窗口大小更新。）

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

于 2013-06-20T22:43:25.040 回答
1

如果您引用完整的 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，在这种情况下您应该添加：

scope.$on('$destroy', $(window).off('resize.resizer', resizeHandler);
于 2013-11-22T19:57:15.460 回答