Resolving sync between mdDialog and API response in angularJS

问题

I am facing an issue while using mdDialog confirm from angularJS material design. I am using the confirm box to ask a user for his choice to continue or confirm, If the user confirms the API will take the value and return the returns or else return, however my API is still being called even if the user does not confirm anything. I was able to get around the issue by using normal confirm and alert box but would be thankful if some body can suggest me a fix. I have looked into promises but could not figure how to implement it in my code. Here is a snippet of my code

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

So here rts.doSearch(data) is the call being made to the API which is getting executed regardless of the if condition before it.

回答1:

I use something similar but it's ui instead of Material, anyway i believe it could give the clues to make it work.

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

and the 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>

来源：https://stackoverflow.com/questions/51970825/resolving-sync-between-mddialog-and-api-response-in-angularjs