Dom 如何从Angular指令订阅以获得调整大小事件的通知？

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

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

我使用的是Bootstrap的“容器流体”和“行流体”类，因此从视觉上看，元素的动态大小与预期的一样。然而，我为DOM的“resize”事件设置的绑定似乎从未启动过。我已经验证了“元素”确实是所讨论的预期元素

我在没有完整jQuery的情况下执行此操作，所以它只是使用Angular的JQLite

我遗漏了什么吗？

只有在没有jQuery插件的情况下才能将

$window

绑定到

resize（）

方法，但这并不意味着无法在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();

    })
  }
}

app.directive（'sizer'，函数（$window）{
返回{
控制器：功能（$scope）{
$scope.inputSize='？'
},
模板：“”+
“
”+
'输入大小={{inputSize}}'，
链接：功能（范围、元素）{
var w=角度元素（$window）；
var size=element.find（'input'）[0].clientWidth；
scope.inputSize=大小；
w、 绑定（'resize'，function（））{
scope.inputSize=element.find（'input'）[0].clientWidth；
作用域：$apply（）；
})
}
}

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

---

另外，我在上面的评论中是不正确的-

resize（）

被烘焙到angularjs中。

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

我用了rGils plunker来表示不同

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

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

---

不是这方面的专家。可能是jqLite不支持调整大小事件。这只是一个猜测。如果我是你，我会尝试包含jQuery，看看是否有区别。我认为你只能将

$window

绑定到调整大小事件，不过正如另一条评论所说，你必须使用完整的jQuery

resize（）

方法。另外，请记住，

$window

还附加了纯js

onresize（）

事件-不涉及jQuery。

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