从另一个模态打开模态,而不关闭第一个模态

时间:2018-05-03 15:26:33

标签: javascript angularjs modal-dialog material-design

我找到了一些解决方案,但没有一个是我的代码合法的。

所以,基本上我正在尝试打开一个模态来确认用户确实要取消并退出该过程。第二个模态将打开,但第一个模态将关闭。 流程是这样的。如果用户取消,则会打开另一个弹出窗口并询问用户是否要退出。如果用户单击是,则流程结束,一切都将正常运行。 但是,如果用户单击否,我希望再次显示第一个模态。

也许代码可以帮到你。

HTML

<md-dialog flex="40" aria-label="Edit Light">

    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>Manual select bridge</h2>
        </div>
    </md-toolbar>

   <md-dialog-content>
    <div class="md-dialog-content">
        <div class="container-fluid">
            <form class="form-horizontal" role="form" id="editBridge" name="editBridge">
            <!--Bridge-->

              <!--Bridge-->
                <div class="form-group has-feedback">
                    <label for="light-bridge-select" class="col-sm-2 control-label">Bridge</label>
                    <div class="col-sm-10 pr30">
                        <select id="light-bridge-select" class="form-control" ng-model="light.bridgeMac" data-required-cond="{{ light.commissioned }}"
                            ng-options="item.mac as item.name for item in bridgesList">
                            <option value="" disabled >Select Bridge</option>
                        </select>
                        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                        <div style="height:15px" class="help-block with-errors"></div>
                    </div>
                </div>

                <!--ID-->
                <div class="form-group has-feedback">
                    <label class="col-sm-2 control-label">Light ID</label>
                    <div class="col-sm-10">
                        <div flex>
                            <input name="light-id" data-light-id class="form-control" ng-model="light.newidentifier" type="number">
                            <info-tooltip key="light.form.light_id"></info-tooltip>
                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                        </div>
                        <div style="height:15px" class="help-block with-errors"></div>
                    </div>


                <div ng-show="showError" style="height:15px" class="help-block with-errors">
                    <p class="text-danger"> All fields are required.</p>
                </div>
                  <md-dialog-actions layout="row">
                        <span flex></span>
                        <md-button ng-click="save()">Save</md-button>
                        <md-button ng-click="cancel()">Cancel</md-button>
                  </md-dialog-actions>
        </form>
        </div>
    </div>
</md-dialog-content>

.js file

this.manualMapping= function (bridges,light) {

    return $mdDialog.show({
        templateUrl: "views/common/modals/manual-mapping-light.html",
        resolve: {
            bridges: function () {
                return bridges
            },
            light: function () {
                return light
            }
        },
        clickOutsideToClose: false,
        skipHide:true,
       controller: [
            '$rootScope',
            '$scope',
            'defaults.services',
            'modal.services',
            'profile.services',
            '$timeout',
            function (
                $rootScope,
                $scope,
                $defaultServices,
                $modalServices,
                $profileServices,
                $timeout
            ) {
             $timeout(function () {
                    var addLightForm = $('#addLight');

                    addLightForm.validator({
                        disable: false,
                        focus: true,
                        excluded: [':disabled'],
                        feedback: {
                            success: 'glyphicon-ok',
                            error: 'glyphicon-remove'
                        },
                        custom: {

                             'light-id': function () {
                                return $profileServices.checkLightDuplicateId(
                                    $scope.light.customLightId,
                                    $scope.light.identifier
                                ) ? 'Duplicate Light Id' : undefined
                            },
                        }
                    });
             });
             $scope.bridgesList = bridges

             $scope.save = function(){

                $profileServices.manualUpdateBridgeOrDelete(light.identifier, $scope.light.bridgeMac, $scope.light.newidentifier, light.room,true).
                then(function (response) {

                if(response){
                     $modalServices.modalAlert('The light you added was commissioned','Light succesfully added!').then(function(){
                         $rootScope.$broadcast('refreshProfile');
                     })

                }
                else{
                    $modalServices.modalAlert("The light you added wasn't commissioned",'Error','red').then(function(){
                         $rootScope.$broadcast('refreshProfile');
                     })

                }

                })

             }

             $scope.cancel = function() {
             var confirm = $mdDialog.confirm()
              .title('Are you sure you want to cancel?')
              .textContent('If you cancel the commissioning process of the light you added, it will remove the light! Are you sure you want to cancel?')
              .ok('Yes')
              .cancel('No');

               $mdDialog.show(confirm).then(function() {
                $modalServices.modalAlert("The light was added, but not commissioned!",'Succes','red').then(function(){
                $rootScope.$broadcast('refreshProfile');
               },
               function(){

               });

             });

        }
        }]
    });
}

提前致谢。

0 个答案:

没有答案