AngularJS Service aktualisiert die Ansicht nicht

Question

Ich habe einen Service in meiner application.js Datei in meinem AngularJS Projekt erklärt. Es sieht wie folgt aus:

application.factory('interfaceService', function ($rootScope, $timeout) { 
    var interfaceService = {}; 
    interfaceService.lang = ""; 
    interfaceService.dev = "" 
    interfaceService.theme = ""; 
    interfaceService.integ = ""; 
    //For Integration Type 
    interfaceService.demo = function (dev, theme, integ, lang) { 
     this.dev = dev; 
     this.theme = theme; 
     this.integ= integ; 
     this.lang = lang; 
     this.broadcastItem(); 
    }; 
    interfaceService.broadcastItem = function() { 
     $timeout(function(){ 
      $rootScope.$broadcast('handleBroadcast'); 
     }); 
    }; 
    return interfaceService; 
}); 

ich den oben genannten Service verwende Variablen zwischen 2 meiner Controllers passieren. Die Steuerung, die den Dienst nennt, ist hier:

 $scope.buildDemo = function() { 
      interfaceService.demo(device, template, integ, language); 
      $rootScope.template = template; 
      $rootScope.themeFolder = template; 
      $state.go("MainPage", { 
       "themeName": $rootScope.themeFolder 
      }); 
     } 

Diese Funktion wird ausgelöst, wenn der Benutzer klickt auf ein Div auf meiner view

<div id='build-btn' ng-click='buildDemo()'>Go</div> 

Das Problem, das ich habe ist, dass meiner Meinung nach ist die Aktualisierung nicht, wenn Ich klicke auf den Knopf. Ich muss ein zweites Mal darauf klicken, um Änderungen zu sehen. Würde jemand wissen, was das verursacht? Die URL-Aktualisierungen und die neue Ansicht werden auf der Seite angezeigt, aber die Elemente, die basierend auf den im Dienst festgelegten Parametern angezeigt werden sollen, sind erst sichtbar, wenn ich ein zweites Mal auf die Schaltfläche "Gehe zu" klicke.

Answer 1

Auf den ersten Klick handleBroadcast Ereignis wird gesendet und aber von niemandem erhalten, weil, wenn Sie "GO" -Taste drücken, zu diesem Zeitpunkt Zustand Übergang auftritt und es lädt Vorlage und seinen Controller. Wenn der Controller instanziiert wurde, registriert er das Hörerereignis unter Verwendung von $on unter handleBroadcast Ereignis.

Ich würde vorschlagen, dass Sie warten, um ein Ereignis zu übertragen, bis Controller & seine zugrunde liegende Ansicht wird rendern. Dies kann getan werden, indem Vorteil von Versprechen, die von $state.go Methode zurückgegeben werden. Was ist abgeschlossen, wenn der Übergang erfolgreich ist.

-Code

$scope.buildDemo = function() { 
    //state transition started. 
    $state.go("MainPage", { 
     "themeName": $rootScope.themeFolder 
    }).then(function() { 
     //state transition completed 
     //controller instance is available & listener is ready to listen 
     interfaceService.demo(device, template, integ, language); 
     $rootScope.template = template; 
     $rootScope.themeFolder = template; 
    }); 
}