Winkelkomponente wird nicht neu gerendert, wenn Eigenschaft von addEventListener ausgelöst wird

Question

Ich habe eine Angular Component (im v1.5.6), die auf die Geräteausrichtung hört und dann eine Nachricht anzeigt, wenn der Benutzer ein Tablet verwendet und in Hochformat geschaltet hat Modus (die Überprüfung dafür funktioniert ordnungsgemäß). Meine Vorlage ist:

<div ng-show="$crtl.isTablet" class="orientation-warning-message tablet-warning-message"> 
    <p>We think you are accessing this app on a tablet - you must use the app in landscape mode to continue (turn on side)</p> 
</div> 

und meine Komponente:

angular 
    .module('myApp') 
    .component('checkDevice', { 
    templateUrl: 'directives/checkDevice/checkDevice.tpl.html', 
    controller: function() { 
     var self = this; 

     this.isTablet = false; 

     window.addEventListener("orientationchange", function() { 

     // do some checks here and if a tablet and on portrait mode then: 
     self.isTablet = true; 

     }, false); 

    } 
}); 

Aber die Meldung nicht, weil isTablet aus dem addEventListener Rückruf Einstellung scheint nicht die Komponente neu zu machen. Wenn ich isTablet zu true außerhalb des addEventListener Callbacks einstelle, dann funktioniert es. Muss ich eine Komponente manuell erneut auslösen?

Answer 1

Haben Sie versucht, einen $ Rahmen hinzufügen $ apply() ... wie:.

angular 
    .module('myApp') 
    .component('checkDevice', { 
    templateUrl: 'directives/checkDevice/checkDevice.tpl.html', 
    controller: function(scope) { 
     var self = this; 

     this.isTablet = false; 

     window.addEventListener("orientationchange", function() { 


     // do some checks here and if a tablet and on portrait mode then: 
    scope.$apply(function(){  
     self.isTablet = true; 
    }); 
     }, false); 

    } 
}); 

Ursache Angular keine externen Ereignisse sehen (wie SetTimeOut()) Sie haben es zu zwingen, zu aktualisieren Ihr Anwendungsbereich