Service Asynchron-Aktualisierungswert

Question

Ich habe einen Dialog Controller:

.controller('loadingDialogCtrl', function($scope, $mdDialog, $rootScope, loadingDialog) { 
    $scope.loadingDialog = loadingDialog; 
}); 

In meinem anderen Controller zeige ich diesen Dialog-Controller und manipulieren mit ihm durch LoadingDialogService:

.controller('myCtr', function($scope, $mdDialog, loadingDialog) { 
    $mdDialog.show({ 
     controller: 'loadingDialogCtrl', 
     templateUrl: 'tmpl/loadingDialog.tmpl.html' 
    }); 
    loadingDialog.status = "Formatting..."; 

}) 

LoadingDialog Service:

angular.module('LoadingDialogService', []).service('loadingDialog', function ($mdDialog) { 
    this.progress = 0; 
    this.status = "Loading data from board..."; 
    this.additionalStatus = ""; 
    this.mode = "determinate"; 

    return { 
     progress: this.progress, 
     status: this.status, 
     additionalStatus: this.additionalStatus, 
     mode: this.mode 
    } 
}); 

Das funktioniert gut. Aber zum Beispiel, wenn ich Service Wert in async Funktion zu ändern, meine Dialogansicht nicht aktualisiert:

//progress bar inside dialog have changed 
loadingDialog.progress = 55; 
setTimeout(function() { 
    //progress bar inside dialog didn't change 
    loadingDialog.progress = 55; 
}, 10) 

Answer 1

Im loadingDialogCtrl statt

$scope.loadingDialog = loadingDialog; 

Sie

$rootScope.$watch(function() { 
    return loadingDialog; 
}, function(loadingDialogValue) { 
    $scope.loadingDialog = loadingDialogValue; 
}, true); 

OR (elegantere Lösung)

$scope.getLoadingDialog = function() { 
    return loadingDialog; 
}; 

Answer 2

setTimeout() außerhalb Winkels ist der Zyklus zu verdauen, so dass der Blick Wert wird nicht aktualisiert. Verwenden Sie stattdessen $timeout(). (https://docs.angularjs.org/api/ng/service/ $ timeout)