javascript - 解决 AngularJS 中 mdDialog 和 API 响应之间的同步问题

Question

我在使用 angularJS Material 设计中的 mdDialog 确认时遇到问题。我使用确认框询问用户选择继续还是确认，如果用户确认，API 将获取该值并返回返回值，否则返回，但是即使用户不确认，我的 API 仍然被调用任何事物。我能够通过使用正常的确认和警报框来解决这个问题，但如果有人可以建议我修复，我将不胜感激。我研究过 promise ，但不知道如何在我的代码中实现它。这是我的代码片段

if ($scope.options.selected[i].field === "displayInterval") {
    data.aggregations = "date:" + $scope.options.selected[i].value.toString();
    if (data.aggregations === 'date:hour' || 'date:minute') {
        var confirm = $mdDialog.confirm()
            .title('Some of the providers you selected do not support this display interval.')
            .textContent('Continue with only sources that support by hour or minute charting.')
            .ok('Yes')
            .cancel('No');
        $mdDialog.show(confirm).then(function() {
            $scope.aggs = data.aggregations;
        }, function() {
            return;
        });
    } else {
        $scope.aggs = data.aggregations;
    }
}

rts.doSearch(data).then(function(response){
    $('.lineChart').show();
    if (response.status == 500 || response.status == 404 || response.status == 401) {
        alert("Error:" + response.message);
        return;
    }

    loadAggregation(response.provider_results, data.query);

所以这里的 rts.doSearch(data) 是对 API 的调用，无论前面的 if 条件如何，该调用都会被执行。

Answer 1

我使用类似的东西，但它是 ui 而不是 Material，无论如何我相信它可以提供使其工作的线索。

app.controller('prioridade', function($scope, $filter, $uibModal) {
$scope.prioridades = response.data;
$scope.mymodal={};
$scope.openmymodal = function(msize, mtimeout, mbackdrop, mclass, mresponse){ /*this has some variables to make it dynamic*/
    $scope.mymodal.size = msize!=''?msize:'md';
    $scope.mymodal.timeout = mtimeout!=''?mtimeout:0;
    $scope.mymodal.backdrop = mbackdrop!=''?mbackdrop:true;
    $scope.mymodal.mclass = mclass!=''?mclass:'btn-success';
    $scope.mymodal.mresponse = mresponse!=''?mresponse:'no';/*aguardar por resposta yes or no*/
    var modalInstance = $uibModal.open({
        animation: true, ariaLabelledBy: 'modal-title', ariaDescribedBy: 'modal-body',
        templateUrl: 'myMainModal.html', controller: 'ModalInstanceCtrl', keyboard: true,
        controllerAs: '$ctrl', size: $scope.mymodal.size, backdrop: $scope.mymodal.backdrop,/*true or 'static'*/
        resolve: {mymodal: function(){return $scope.mymodal;}} /*to pass the variables to the modal*/
    });
    modalInstance.result.then(function(result) {
        $scope.myresult = result;
        if($scope.myresult.results=='OK'){
            /*do what ever you want*/
        } else { /*if canceled*/}
    });
};
/*here is where i call the modal function*/
$scope.resetPSW = function(user) {
    $scope.mymodal.header='! Atenção está prestes a Apagar a Psw do User!';
    $scope.mymodal.body='<div class="col-md-12 col-sm-12 col-xs-12">** Tem a certeza que pretende apagar a Psw deste user? **</div>';
    $scope.mymodal.post=user; $scope.openmymodal('md', 1, true, 'btn-danger', 'yes');
};

 });
 app.controller('ModalInstanceCtrl', function ($uibModalInstance, mymodal, $timeout, $sce) {
var $ctrl = this; $ctrl.mymodal = mymodal; $ctrl.mymodal.body = $sce.trustAsHtml($ctrl.mymodal.body);
switch($ctrl.mymodal.timeout){
    case 0, 1:
        $ctrl.ok = function(){$ctrl.mymodal['results'] = 'OK'; $uibModalInstance.close($ctrl.mymodal);}; 
        $ctrl.cancel = function(){$uibModalInstance.dismiss('cancel');};
        break;
    default:
        promise = $timeout(function(){$uibModalInstance.dismiss('cancel');}, 3000);
        $ctrl.ok = function(){$ctrl.mymodal['results'] = 'OK'; $timeout.cancel(promise); $uibModalInstance.close($ctrl.mymodal);};
        $ctrl.cancel = function(){$timeout.cancel(promise); $uibModalInstance.dismiss('cancel');};
        break;
};
 });

和 HTML

<script type="text/ng-template" id="myMainModal.html">
    <div class="modal-header" ng-class="$ctrl.mymodal.mclass">
        <h3 class="modal-title" id="modaltitle">{{$ctrl.mymodal.header}}</h3>
    </div>
    <div class="modal-body" id="modalbody" ng-bind-html="$ctrl.mymodal.body"></div>
    </br>
    <div class="modal-footer" id="modalfooter" ng-show="$ctrl.mymodal.timeout<=2">
        <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()" ng-show="$ctrl.mymodal.timeout==1">Cancel</button>
    </div>
</script>