angularjs - 使用 Angular 模态作为警报

Question

我对 AngularJs 还是比较陌生，我创建了一个非常通用的模态视图，我想做的是能够全局使用它来代替其他当前的 alert()，但是其中一些会有不同的文本和按钮等...实例化全局 Controller 但为每个 Controller 设置不同首选项的最佳方法是什么？

这是我的例子:

controller.js

(function () {

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

        test.controller('modal', function ($scope, $uibModal) {
            $scope.modal= function () {


                var modalInstance = $uibModal.open({
                    animation: $scope.animationsEnabled,
                    templateUrl: 'template.html',
                    controller: 'test',
                    scope: $scope,
                    size: 'medium',
                    backdrop: 'static'
                });
                modalInstance.result.then(function () {
                }, function () {
                    console.log("dismissed")
                });
            }
        });

        test.controller('modalInstance', function ($scope, $uibModalInstance) {
            $scope.cancel = function () {
                $uibModalInstance.dismiss('cancel');
            };
        }); 


    })
    ();

模板

<div class="modal-header">
</div>
<div class="modal-body" style="margin: 0 auto;" ng-controller="exportController">
    <p>Are you sure you want to continue?</p>
</div>
<div class="modal-footer btn-group-xs">
    <button class="btn btn-primary" type="button" ng-click="open()">Ok</button>
    <button class="btn btn-primary" type="button" ng-click="cancel()">Cancel</button>
</div>

alert() 所在位置的示例

 $scope.launchTerms = function($event) {
                $event.preventBasick();
                alert("Launch Terms");
            }; 

谁能举个例子？

Answer 1

您可以编写一个服务，它是调用 $uibModal.open() 的包装器，然后在您需要的任何地方注入(inject)该服务而不是 $uibModal

简单的例子。

app.factory('myModals', ['$uibModal', function ($uibModal) {
    // called from various methods within factory
    function openModal(template, data, options) {
        var modalOpts = {
            animation : true,
            templateUrl : template,
            controller : function ($scope, $uibModalInstance, alert_data) {
                $scope.alert_data = alert_data;
                $scope.cancel = function () {
                    $uibModalInstance.dismiss('cancel');
                };
            },
            resolve : {
                alert_data : data
            },
            size : 'medium',
            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
            console.log("modal dismissed");
            return data
        });

        return modalInstance;
    }

    // one type of modal
    function alert(type, text, size) {
        var template = type === 'success' ? 'template-success.html' : 'template-error.html';

        var opts = {
            size : size || 'sm'
        };
        var data = {
            title : type === 'success' ? "OK" : "Ooops",
            text : text
        };

        return openModal(template, data, opts);

    }

    return {
        alert : alert
    }

}]);

Controller

app.controller('somctrl', function($scope, myModals){
    $scope.successMessage = 'Way to go Jack!';
    var modal = myModals.alert('success', $scope.successMessage, 'small');

    modal.result.then(function(data){
        // do something with data on close
    }, function(data){
        // do something on dismiss
    })


});

DEMO