web-dev-qa-db-fra.com

Evénement AngularJS sur la fenêtre innerWidth changement de taille

Je cherche un moyen de regarder les changements de la largeur de la fenêtre. J'ai essayé ce qui suit et cela n'a pas fonctionné:

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

aucune suggestion?

javascriptjqueryangularjsangularjs-scope
63
Liad Livnat

Nous pourrions le faire avec 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.
    });
});

Sachez que lorsque vous liez un gestionnaire d'événements à l'intérieur d'étendues pouvant être recréées (comme des étendues ng-repeat, des étendues de directive, ..), vous devez dissocier votre gestionnaire d'événements lorsque la portée est détruite. Si vous ne le faites pas, à chaque fois que l'étendue est recréée (le contrôleur est réexécuté), un autre gestionnaire est ajouté, ce qui provoque un comportement inattendu et provoque des fuites.

Dans ce cas, vous devrez peut-être identifier votre gestionnaire attaché:

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

Dans cet exemple, j'utilise espace de noms d'événement de jQuery. Vous pouvez le faire différemment selon vos besoins.

Amélioration : Si le traitement de votre gestionnaire d'événements prend un peu de temps, afin d'éviter le problème suivant: l'utilisateur pourrait continuer à redimensionner la fenêtre, ce qui entraînerait être exécuté plusieurs fois, nous pourrions envisager de réduire la fonction. Si vous utilisez nderscore , vous pouvez essayer:

$(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 anti-rebond la fonction:

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

Différence entre l'étranglement et la suppression d'une fonction

142
Khanh TO

Pas besoin de jQuery! Cet extrait simple fonctionne très bien pour moi. Il utilise angular.element () pour lier l’événement de redimensionnement de la fenêtre.

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

Unbind event

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

J'ai trouvé un jfiddle qui pourrait aider ici: http://jsfiddle.net/jaredwilli/SfJ8c/

J'ai refactored le code pour le rendre plus simple pour cela.

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

Vous pouvez ensuite faire référence à windowWidth à partir du code HTML

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

Si la solution de Khanh TO a causé des problèmes d’assurance-chômage (comme ce fut le cas pour moi), essayez d'utiliser $timeout pour ne pas mettre à jour l'attribut tant qu'il n'a pas été modifié pendant 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
});

Référence: https://Gist.github.com/tommaitland/7579618

9
rgpass