Question

我仍然是AngularJs的新手，我创建了一个非常通用的Modal视图，我想要做的是能够全局使用它代替其他当前的alert（），但是其中一些会有不同的文本和按钮等...实例化全局控制器但为每个控制器设置不同的首选项的最佳方法是什么？

以下是我的例子：

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()的包装器，然后在您需要的地方注入该服务而不是$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
    }

}]);

控制器

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

Answer 2

我认为解决这个问题的一个好方法是创建服务。这种方式只需实例化服务，您可以在每个新控制器中包含所需的数据，而无需重复代码。请注意，您需要修改代码以与您的代码集成以满足您的需求：

angular.module('test.modalService', [])
        .factory("modalService", function () {

            var ConstructorMOdal = function (scope) {
                this._fillModalScope(scope);
            };

            ConstructorModal.prototype._fillModalScope = function (scope) {
                this._scope = scope;
                this._scope.message= scope.message;  
                // Do your magic -> variables filled here will be present in your controller scope
            };

            return {
                ConstructorModal: ConstructorModal
            };

        });

在您的控制器中包含该服务并实例化（此处和服务中的$ scope作为示例，您可以传递任何所需内容并修改服务）：

test.controller('modal', function ($scope, $uibModal, modalService) { ...
new modalService.ConstructorModal($scope);

使用角度模态作为警报

2 个答案: