解决angularJS中mdDialog和API响应之间的同步 [英] Resolving sync between mdDialog and API response in angularJS

问题描述

在从angularJS材质设计中使用mdDialog确认时，我遇到了一个问题.我正在使用确认框询问用户选择继续还是确认，如果用户确认API将采用该值并返回返回值，否则返回，但是即使用户未确认，我的API仍在被调用任何事物.我可以通过使用正常的确认和警报框来解决此问题，但如果有人可以向我提出修复建议，我将不胜感激.我已经研究了promises，但是无法弄清楚如何在我的代码中实现它.这是我的代码段

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

因此，这里rts.doSearch(data)是对正在执行的API的调用，而不管其之前的if条件如何.

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

推荐答案

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

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

和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>

这篇关于解决angularJS中mdDialog和API响应之间的同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！