Question

我有一个对话框控制器：

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

在我的另一个控制器中，我显示了这个对话框控制器并通过LoadingDialogService：

进行操作

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

})

LoadingDialog服务：

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
    }
});

这很好用。但是，例如，如果我在异步函数中更改服务值，我的对话框视图不会更新：

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

Answer 1

setTimeout()超出了角度的摘要周期，因此视图值不会更新。请改用$timeout()。（https://docs.angularjs.org/api/ng/service/ $超时）

Answer 2

在loadingDialogCtrl而不是

$scope.loadingDialog = loadingDialog;

你应该使用

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

OR（更优雅的解决方案）

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

服务异步更新值

2 个答案: