AngularJS事件在窗口内部宽度大小改变

我正在寻找一种方法来观察窗口内部宽度大小变化的变化。 我试了下面，它不工作：

$scope.$watch('window.innerWidth', function() { console.log(window.innerWidth); }); 

有什么build议么？

Answer 1

我们可以用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. }); }); 

请注意，如果在可重新创build的作用域内绑定事件处理程序（如ng-repeat作用域，指令作用域等），则应在作用域被销毁时解除绑定事件处理程序。 如果你不这样做，那么每次当范围被重新创build（控制器重新运行）时，将会增加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)); 

或删除function：

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

调节和去除function之间的区别

Answer 2

不需要jQuery！ 这个简单的片段对我来说工作得很好。 它使用angular.element（）来绑定窗口大小调整事件。

 /** * Window resize event handling */ angular.element($window).on('resize', function () { console.log($window.innerWidth); }); 

Answer 3

我发现一个jfiddle可能在这里帮助： http : //jsfiddle.net/jaredwilli/SfJ8c/

我重构了代码，使其更简单。

 // In your controller var w = angular.element($window); $scope.$watch( function () { return $window.innerWidth; }, function (value) { $scope.windowWidth = value; }, true ); w.bind('resize', function(){ $scope.$apply(); }); 

然后你可以从html中引用windowWidth

 <span ng-bind="windowWidth"></span> 

Answer 4

如果Khanh TO的解决scheme给你带来了UI问题（就像我这样做），尝试使用$timeout不更新属性，直到它没有改变500ms。

 var oldWidth = window.innerWidth; $(window).on('resize.doResize', function () { var newWidth = window.innerWidth, updateStuffTimer; if (newWidth !== oldWidth) { $timeout.cancel(updateStuffTimer); } updateStuffTimer = $timeout(function() { updateStuff(newWidth); // Update the attribute based on window.innerWidth }, 500); }); $scope.$on('$destroy',function (){ $(window).off('resize.doResize'); // remove the handler added earlier }); 

参考： https ： //gist.github.com/tommaitland/7579618