Modal Factory用于代替Confirm()

时间:2016-03-22 14:25:32

标签: angularjs

我创建了一个Angular Modal工厂,它传递一些参数,根据传回的模板和选项创建动态模态。但是,我想替换我的应用程序中的所有确认对话,但我正在努力解决这个问题。

模态工厂

(function () {

    var testApp= angular.module('test');

    testApp.factory('myModals', ['$uibModal', function ($uibModal) {
        // called from various methods within factory
        function openModal(template, data, options) {
            //build all of the modal options
            var modalOpts = {
                animation: true,
                templateUrl: template,
                controller: function ($scope, $uibModalInstance, alert_data) {
                    $scope.alert_data = alert_data;
                    $scope.okToProceed = function () {
                        $scope.goodToGo = true;
                        console.log("true")


                    };
                    $scope.cancel = function () {
                        $uibModalInstance.dismiss('cancel');
                        console.log("modal cancelled")
                    };
                },
                resolve: {
                    alert_data: data
                },
                size: '480',
                backdrop: 'static'
            };
            // extend options set in each use type function
            if (options) {
                angular.extend(modalOpts, modalOpts);

            }
            var modalInstance = $uibModal.open(modalOpts);

            modalInstance.result.then(function (data) {
                // always do something when close called
                return data;
            }, function (data) {
                //always do something when dismiss called
                return data
            });

            return modalInstance;
        }

        function alert(type, text, size) {

            var template;
            // enter in template and string being passed back to identify modal type
            switch (type) {
                case 'test1':
                    template = 'test1.popup.html';
                    break;
                case 'test2':
                    template = 'test2.popup.html';
                    break;

            }

            var opts = {
                //default but should be passed back
                size: size || 'sm'
            };
            var data = {
                title: type === 'success' ? "OK" : "Error",
                text: text
            };

            return openModal(template, data, opts);

        }

        return {
            alert: alert
        }

    }])
})();

template.html

<div class="modal-header">
    <h3 class="modal-title"></h3>
</div>
<div class="modal-body">
    <h3>{{alert_data.text}}</h3>
</div>
<div class="modal-footer">
    <button class="btn btn-warning" type="button" ng-click="okToProceed()">Ok</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>

</div>

确认要替换的示例

 $scope.discardSource = function(currentIndex) {
                if (confirm("Press 'OK' to confirm.")) {
                    $log.debug("discardDataSource currentIndex: " + currentIndex);
                    $log.debug($scope.model.dataSamples[currentIndex]);

0 个答案:

没有答案