Angularjs 引导警报消息表示为模态、角度

引导程序3提供：

成功、信息、警告、危险

但是，有时视图没有足够的空间显示事件消息

有没有简单的方法可以用以角度来包装事件

---

这是我开始玩的游戏

我会回答我自己的问题

简单方法 流程非常简单和直接。我们不会在这里重新发明轮子

我们不需要页眉和页脚：

对话框模板HTML:

<div class="modal-body" style="padding:0px">
    <div class="alert alert-{{data.mode}}" style="margin-bottom:0px">
        <button type="button" class="close" data-ng-click="close()" >
            <span class="glyphicon glyphicon-remove-circle"></span>
        </button>
        <strong>{{data.boldTextTitle}}</strong> {{data.textAlert}}
    </div>
</div>

var ModalInstanceCtrl = function ($scope, $modalInstance, data) {
  $scope.data = data;
  $scope.close = function(/*result*/){
    $modalInstance.close($scope.data);
  };
};

模式可能为：

成功、信息、警告、危险


模态实例控制器：

<div class="modal-body" style="padding:0px">
    <div class="alert alert-{{data.mode}}" style="margin-bottom:0px">
        <button type="button" class="close" data-ng-click="close()" >
            <span class="glyphicon glyphicon-remove-circle"></span>
        </button>
        <strong>{{data.boldTextTitle}}</strong> {{data.textAlert}}
    </div>
</div>

var ModalInstanceCtrl = function ($scope, $modalInstance, data) {
  $scope.data = data;
  $scope.close = function(/*result*/){
    $modalInstance.close($scope.data);
  };
};


这是模态配置和内容：

演示



指导方式
演示2

为了更好地维护，我们可以将上述所有编写的代码放入指令中：

HTML


希望这能为其他人节省时间。
谢谢你回答自己的问题，这很有帮助

这是一个“作为服务”的版本，您可以从任何控制器连接和启动，而无需包含指令标记

它使用最新的angular UI引导范例进行模态分析

它有一些方便的方法（信息、错误、警告、成功）

当以数据作为事件参数关闭时，它会触发一个事件，以防您需要知道这一点

享受吧

angular.module('modal.alert.service', [], function ($provide) {
    'use strict';
    $provide.factory('ModalAlertService', ['$rootScope', '$uibModal', 
                                           function ($rootScope, $uibModal) {

        var factory = {
            alert: function(mode, title, text) {

                var modalData = {
                    mode : mode,
                    title : title,
                    text : text
                };

                var modalInstance = $uibModal.open({
                    template: '<div class="modal-body" style="padding:0px">' +
                        '<div class="alert alert-{{data.mode}}" style="margin-bottom:0px">' +
                        '<button type="button" class="close" data-ng-click="close()" >' +
                        '<span class="glyphicon glyphicon-remove-circle"></span>' +
                        '</button><strong>{{data.title}}</strong>: &nbsp; {{data.text}}</div></div>',
                    controller : 'ModalAlertController',
                    backdrop : true,
                    keyboard : true,
                    backdropClick : true,
                    size : 'lg',
                    resolve : {
                        data : function() {
                            return modalData;
                        }
                    }
                });

                modalInstance.result.then(function(data) {
                    $rootScope.$broadcast('modal-alert-closed', { 'data' : data });
                });

            },
            info: function(title, text) {
                factory.alert('info', title, text);
            },
            error: function(title, text) {
                factory.alert('danger', title, text);
            },
            warn: function(title, text) {
                factory.alert('warning', title, text);
            },
            success: function(title, text) {
                factory.alert('success', title, text);
            }
        };

        return factory;

    }]);
}).controller('ModalAlertController', function ($scope, $uibModalInstance, data) {
    $scope.data = data;

    $scope.close = function() {
        $uibModalInstance.close($scope.data);
    };
});

angular.module（'modal.alert.service'，[]，函数（$provide）{
"严格使用",；
$provide.factory（'ModalAlertService'，['$rootScope'，'$uibModal'，'，
函数（$rootScope，$uibModal）{
变量工厂={
警报：功能（模式、标题、文本）{
var modalData={
模式:模式,，
标题:标题,，
文本：文本
};
var modalInstance=$uibModal.open({
模板：“”+
'' +
'' +
'' +
“{{data.title}}：{{data.text}”，
控制器：“ModalAlertController”，
背景：没错，
键盘：没错，
backdropClick:true，
尺寸：“lg”，
决心：{
数据：函数（）{
返回modalData；
}
}
});
modalInstance.result.then（函数（数据）{
$rootScope.$broadcast（'modal-alert-closed'，{'data'：data}）；
});
},
信息：功能（标题、文本）{
工厂警报（“信息”、标题、文本）；
},
错误：函数（标题、文本）{
工厂警报（“危险”、标题、文本）；
},
警告：功能（标题、文本）{
工厂警报（“警告”、标题、文本）；
},
成功：功能（标题、文本）{
factory.alert（'success'，title，text）；
}
};
返回工厂；
}]);
}).controller（'ModalAlertController'，函数（$scope，$uibModalInstance，data）{
$scope.data=数据；
$scope.close=函数（）{
$uibModalInstance.close（$scope.data）；
};
});
我制作了一个相互依赖的服务和控制器：

.service('AlertService', function($uibModal){
    /*
        headerText - presents text in header
        bodyText - presents text in body
        buttonText - presents text in button. On its click if method parameters is not passed, modal will be closed.
                    In situation that the method parameters is passed, on its click, method will be called. For situations
                    like that, there is parameter buttonText2 which will be used as cancel modal functionality.
        method - presents passed function which will be called on confirmation
        buttonText2 - presents text in button for cancel

     */
    var alert = function(headerText, bodyText, buttonText, method, buttonText2){

        method = method || function(){};
        buttonText2 = buttonText2 || '';

        $uibModal.open({
            animation: true,
            templateUrl: '/static/angular_templates/alert-modal.html',
            controller: 'AlertModalInstanceCtrl',
            size: 'md',
            resolve: {
                headerText: function () {
                  return headerText;
                },
                bodyText: function () {
                  return bodyText;
                },
                buttonText: function () {
                  return buttonText;
                },
                method: function () {
                    return method;
                },
                buttonText2: function () {
                    return buttonText2;
                }
            }
        });
    };

    return{
        alert: alert
    };

})
.controller('AlertModalInstanceCtrl', function ($scope, $uibModalInstance, headerText, bodyText, buttonText, method, buttonText2) {
    $scope.headerText = headerText;
    $scope.bodyText = bodyText;
    $scope.buttonText = buttonText;
    $scope.method = method;
    $scope.buttonText2 = buttonText2;

    $scope.ok = function () {
        $scope.method();
        $uibModalInstance.dismiss('cancel');
    };

    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
});

和html文件：

<!--Modal used for alerts in AlertService-->

<div class="modal-header">
    <h3 class="modal-title">{[{ headerText }]}</h3>
</div>
<div class="modal-body">
    <p>{[{ bodyText }]}</p>
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()" ng-if="buttonText2">{[{ buttonText2 }]}</button>
    <button class="btn btn-primary" ng-click="ok()">{[{ buttonText }]}</button>
</div>

-如果您传递headerText、bodyText、buttonText和method，它的行为将类似于经典的警报模式，但具有您可以传递并稍后在控制器中处理的功能

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound);

$scope.createRound = function(){
//do something
}

-最后一个。如果您传递了所有参数，它将像上一个一样，只是可以取消并关闭模态

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound, 'Cancel');

$scope.createRound = function(){
//do something
}

当然，如果你想使用它，你必须注入有角度的ui引导我浪费了很多时间来开发这个，但它值得。每次创建一个新控制器、新模板和所有其他东西时，都很烦人。

通过控制器，您可以轻松使用它，只需先注入即可。
谢谢。请求您添加2个功能：1）选项使其无阻塞，无衰减效果2）在某个时间后自动关闭。如果您可以在ngmodules上以模块的形式提交它，那将非常棒。com@MaximShoustin很好的警报，但我如何在JS代码中打开它，只需调用函数，例如
。。。myAlert（）？换句话说，不使用HTML显示警报button@AntonDozortsev一点也不，模态放在指令下，因此您可以轻松地获取模态代码并调用它，而无需任何修改directive@MaximShoustin但这是一个问题，我不想一直复制模式代码
AlertService.alert('Some header', 'Some message', 'Text button');

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound);

$scope.createRound = function(){
//do something
}

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound, 'Cancel');

$scope.createRound = function(){
//do something
}