栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

窗口innerWidth大小更改时的AngularJS事件

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

窗口innerWidth大小更改时的AngularJS事件

我们可以使用jQuery来做到这一点:

$(window).resize(function(){    alert(window.innerWidth);    $scope.$apply(function(){       //do something to update current scope based on the new innerWidth and let angular update the view.    });});

请注意,将事件处理程序绑定在可以 重新创建的 范围内(例如ng-
repeat范围,指令范围等)时,在销毁该范围时应取消绑定事件处理程序。如果不执行此操作,则每次重新创建作用域(重新运行控制器)时,都会再添加1个处理程序,从而导致意外行为和泄漏。

在这种情况下,您可能需要标识附加的处理程序:

  $(window).on("resize.doResize", function (){      alert(window.innerWidth);      $scope.$apply(function(){          //do something to update current scope based on the new innerWidth and let angular update the view.      });  });  $scope.$on("$destroy",function (){      $(window).off("resize.doResize"); //remove the handler added earlier  });

在此示例中,我使用的是jQuery中的事件名称空间。您可以根据自己的要求进行不同的处理。

改进 :如果您的事件处理程序需要花费很长的时间来处理,为避免用户可能会不断调整窗口大小,导致事件处理程序多次运行,我们可以考虑对函数进行
节流 。如果使用下划线,则可以尝试:

$(window).on("resize.doResize", _.throttle(function (){    alert(window.innerWidth);    $scope.$apply(function(){        //do something to update current scope based on the new innerWidth and let angular update the view.    });},100));

取消 功能:

$(window).on("resize.doResize", _.debounce(function (){     alert(window.innerWidth);     $scope.$apply(function(){         //do something to update current scope based on the new innerWidth and let angular update the view.     });},100));


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/636149.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号