Evento AngularJS na mudança de tamanho do innerWidth da janela

Estou procurando uma maneira de observar as alterações na alteração do tamanho da largura interna da janela. Eu tentei o seguinte e não funcionou:

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

alguma sugestão?

Nós poderíamos fazer isso com 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. }); }); 

Esteja ciente de que quando você vincula um manipulador de events dentro de escopos que poderiam ser recriados (como escopos ng-repeat, escopos diretivos, ..), você deve desvincular seu manipulador de events quando o escopo for destruído. Se você não fizer isso, toda vez que o escopo for recriado (o controlador é reexecutado), haverá mais um manipulador, causando comportamento inesperado e vazando.

Nesse caso, você pode precisar identificar seu manipulador anexado:

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

Neste exemplo, estou usando o namespace de evento do jQuery. Você poderia fazer isso de maneira diferente de acordo com suas necessidades.

Melhoria : Se o manipulador de events demorar um pouco para ser processado, para evitar o problema de o usuário continuar redimensionando a janela, fazendo com que os manipuladores de events sejam executados muitas vezes, poderíamos considerar a limitação da function. Se você usar sublinhado , você pode tentar:

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

ou debouncing a 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)); 

Diferença entre estrangular e debounce uma function

Não há necessidade de jQuery! Este simples trecho funciona bem para mim. Ele usa angular.element () para vincular o evento de redimensionamento da janela.

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

Desvincular evento

 /** * Window resize unbind event */ angular.element($window).off('resize'); 

Eu encontrei um jfiddle que pode ajudar aqui: http://jsfiddle.net/jaredwilli/SfJ8c/

Eu refatorei o código para simplificar isso.

 // 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(); }); 

Você pode fazer referência a windowWidth a partir do html

  

Se a solução do Khanh TO causou problemas de interface do usuário para você (como aconteceu comigo), tente usar $timeout para não atualizar o atributo até que ele permaneça inalterado por 500 ms.

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

Referência: https://gist.github.com/tommaitland/7579618