$ rootScope. $ On Ereignis-Listener-Funktion ändert keine Variablenwerte

Question

Ich verwende $ rootScope. $ On in einem Controller, um auf ein Ereignis zu hören, das von einem Modul ausgegeben wird, das ich verwende (angular-patiery). Es funktioniert, dass es das Ereignis bekommt & Ich kann Sachen auf den "Argumenten" durchführen. Aber ich möchte das Objekt args in eine Objektvariable schreiben, die außerhalb des Bereichs der Listener-Funktion deklariert ist. Ich kann nicht den folgenden Code an die Arbeit:

(function() { 
    'use strict'; 
    angular 
     .module('app') 
     .controller('searchSpeakersResultsCtrl', searchSpeakersResultsCtrl); 

     searchSpeakersResultsCtrl.$inject = ['$rootScope', '$scope']; 
     function searchSpeakersResultsCtrl($rootScope, $scope) { 
      var vm = $scope; 


      var pckry = {}; 
      var packeryEventListener = function (event, args) { 
       pckry = args; 
       console.log(pckry); 
      } 

      var unbind = $rootScope.$on('packeryInstantiated', packeryEventListener); 
      console.log(pckry); 
      vm.$on('$destroy', unbind); 

     } 
})(); 

Die console.log innerhalb der Listener-Funktion den richtigen Wert gibt, gibt die console.log außerhalb der Funktion das leere Objekt mit var pckry erstellt = {} ;.

Wie jedoch erwartet wird, aktualisiert die direkte Verwendung der Funktion packeryEventListener (nicht aus $ rootScope. $ On) den Wert von pckry außerhalb der Funktion packeryEventListener.

Was könnte ich vermissen? Scheint so, als ob die grundlegenden JavaScript-Variablen für den Umfang nicht funktionieren, wenn sie mit $ rootScope. $ On verwendet werden. Cheers, H.

Answer 1

Ihr Problem hier ist einfach eine der Timing: die console.log, die ein leeres Objekt sieht, bevor die ausgelöst Callback füllt die Variable auf. Denken Sie daran, dass angular eine sehr asynchrone Umgebung ist: Callbacks passieren immer später als Sie denken.

Das Einhüllen des Codes in einem $timeout() reicht hier möglicherweise aus, aber im Allgemeinen möchten Sie sicherstellen, dass der Code, der ein asynchron verwendet, nicht ausgeführt werden kann, bis der asynchrone Teil abgeschlossen ist. Das bedeutet normalerweise, dass etwas, das einen asynchronen Prozess startet, ein Versprechen geben sollte. Mit Versprechungen können Sie etwas ausführen lassen, wenn sie auflösen oder wenn sie .catch() abgelehnt werden oder Sie können sie auf verschiedene Arten wie $q.all() kombinieren, um auf mehrere abgeschlossene Dinge zu warten.

Beachten Sie, dass $timeout und $http auch Versprechen versprechen.

Sobald Sie ein Versprechen haben, können Sie auch nach der Auflösung des Versprechens, auch wenn es vor Wochen aufgelöst wurde, immer thePromise.then(function() {...}) als Wächter verwenden, um Code auszuführen. (Und denken Sie daran, dass, selbst wenn das Versprechen bereits gelöst wurde, der Rückruf immer noch asynchron aufgerufen wird, also erst, wenn Ihr anderer Code zurückgegeben wurde).

Answer 2

Ja, versuchen Wert in $ Umfang zu speichern und dann sehen, so etwas wie

(function() { 
'use strict'; 
angular 
    .module('app') 
    .controller('searchSpeakersResultsCtrl', searchSpeakersResultsCtrl); 

    searchSpeakersResultsCtrl.$inject = ['$rootScope', '$scope']; 
    function searchSpeakersResultsCtrl($rootScope, $scope) { 
     var vm = $scope; 


     var pckry = {}; 
     var packeryEventListener = function (event, args) { 
      $scope.pckry = args; 
      console.log($scope.pckry); 
     } 

     var unbind = $rootScope.$on('packeryInstantiated', packeryEventListener); 
     console.log($scope.pckry); 
     vm.$on('$destroy', unbind); 

    } 
})();