将对话框从angularjs转换为ionic1

时间:2017-06-13 22:17:09

标签: javascript angularjs ionic-framework

我正从我的应用程序角度js迁移到ionic1 但我在对话框部分

中发现了一个大问题

enter image description here

这是我的angularjs

的html代码
<md-dialog-content>
    <!-- else program.isEasy and not program.easySetting.document-->
    <div ng-if="dlgCtr.program.isEasy && !dlgCtr.program.easySetting.document " class="content">
        Impossible d'activer le programme {{dlgCtr.program.label}}: document de présentation manquant. <br/><br/>
    </div>
    <!-- else -->
    <div ng-if="!dlgCtr.program.isEasy || dlgCtr.program.easySetting.document">
        <div class="content">
            <p>Vous êtes sur le point de confirmer l'activation du programme {{dlgCtr.program.label}}.</p>
            <p>L'abonnement au service pour le programme {{dlgCtr.program.label}} vous sera facturé
                {{(dlgCtr.monthlyFee * 12)| number : 2}} € HT par an.</p>

            <div ng-if="dlgCtr.program.oldProgramId">
                <p>
                    Attention ! En cas de dépôt insuffisant votre programme sera suspendu - aucune opération ne pourra
                    être effectuée jusqu'à l'approvisionnement du Dépôt Contrat Coopérons.
                </p>
                <p ng-if="dlgCtr.program.isEasy">
                    Suite à l'activation de vos modifications, les taux de commission applicables aux affaires
                    en cours resteront inchangés.<br/><br/>
                    Les nouveaux taux de commissionnement seront applicables aux nouvelles affaires.
                </p>

                <p ng-if="!dlgCtr.program.isEasy">
                    Suite à l'activation de vos modifications, tous les participants dont le mail d'invitation
                    aura été supprimé se verront attribuer le nouveau mail d'invitation par défaut.
                </p>
            </div>
        </div>
        <p class="content">
            <i class="fa fa-hand-o-right"></i>
            Cette étape est irréversible
        </p>
    </div>
    <!-- endif -->
</md-dialog-content>
你可以帮我吗

1 个答案:

答案 0 :(得分:2)

我不确定我们是否可以在离子项目中使用Angular Material。

但我可以提供一个我在项目中总是做的解决方案。您可以根据自己的要求进行编辑。

对$ q的所有通知使用angular服务。如果你不想做任何任务(返回承诺),你可以跳过$ q。

 //notificationService.js
 angular.module('myApp')
    .service('notificationService', function ($q, $ionicPopup) {
        var service = {
            showConfirm: showConfirm,
            showAlert:showAlert
        }
        return service;

        function showConfirm(title, template) {
            var deferred = $q.defer();
            var confirmPopup = $ionicPopup.confirm({
                title: title,
                template: template
            });

            confirmPopup.then(function (res) {
                if (res) {
                    deferred.resolve(res);
                } else {
                    deferred.reject('Cancelled');
                }
            });
            return deferred.promise;
        }

        function showAlert(title, template) {
            var deferred = $q.defer();
            var alertPopup = $ionicPopup.alert({
                title: title,
                template: template
            });

            alertPopup.then(function (res) {
                if (res) {
                    deferred.resolve(res);
                } else {
                    deferred.reject('Cancelled');
                }
            });
            return deferred.promise;
        }
    });

在您的控制器中使用此notificationService来调用任何弹出窗口

//myController.js
  angular.module('myApp')
    .controller('myController', function ($scope, notificationService) {
        $scope.delete = function () {
            var title = 'Do you Want to Delete?';
            var template = '<p>You have selected ' + $scope.someName + '\'s Record to delete</p>' +
                '<p>Are You Sure you want to Delete?</p>'
            notificationService.showConfirm(title, template).then(function (res) {
                if (res) {
                    notificationService.showAlert('Success Message',
                        'You Have Deleted Successfully').then(function(res){
                            if(res){
                                console.log('Complete')
                            }
                        });
                }
            })
        }
    });

您必须在HTML代码中调用控制器功能

<button class="button" ng-click="delete()">
    Delete
  </button>

希望这会有所帮助