Fenstergröße ändern Setvariable in der Steuerung nicht

Question

In Angular arbeiten, ich bin für die Fenstergröße zu beobachten und das ‚Gerät‘ Variable auf dem Controller zu ändern, wenn die Witwe Breite eine bestimmte Schwelle überschreitet:

var myModule = angular.module("MyApp", []) 
    .controller('MyController', function(UseHttp){ 

     // store reference of "this" 
     var self = this; 

     function setDevice(){ 
      var wWidth = $(window).width(); 
      var theDevice; 

      if (wWidth <= 991 && wWidth > 767) { 
      theDevice = "narrow desktop"; 
      } else if (wWidth <= 767 && wWidth > 620) { 
      theDevice = "iPad"; 
      } else if (wWidth <= 620 && wWidth > 500) { 
      theDevice = "largeMobile"; 
      } else if (wWidth <= 500 && wWidth > 320) { 
      theDevice = "mediumMobile"; 
      } else if (wWidth <= 320) { 
      theDevice = "smallMobile"; 
      } else { 
      theDevice = "desktop"; 
      } 

      self.device = theDevice;   
     } 

     //self.device gets set on window resize 
     $(window).resize(function(){ 
     setDevice(); 
     $scope.$apply(); //but where do I store the var $scope? 
     }); 

     //self.device gets set right away 
     setDevice(); 

}).service('UseHttp', function($http) {.... 

Aber für aus irgendeinem Grund, wenn ich meine Fenstergröße ändert aktualisieren einen neuen Schwellenwert die diese p-Tag auf der Ansicht erreichen nicht (es jedoch die anfängliche ‚Gerät‘ nicht zeigen)

<article ng-controller="MyController as myCtrl" class="content-wrapper"> 
    <p>{{myCtrl.device}}</p> 

Answer 1

Durch das Gerät in der Größe ändern Ereignis nichts einstellen feuert einen Digest-Zyklus, wenn das Modell aktualisiert wird. Sie werden es mit einem $ Umfang manuell tun müssen, um $ apply() wie folgt aus:.

$(window).resize(function() { 
    setDevice(); 
    $scope.$apply(); 
});