简单方法

流程非常简单明了。我们不会在这里重新发明轮子。

我们既不需要也不会标题：

对话框模板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>

我们甚至不需要使用ng-class：

class="alert-{{data.mode}}"

模式可能是：success, info, warning, danger

模态实例控制器：

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

这是模态配置和内容：

 $scope.data = {
    boldTextTitle: "Done",
    textAlert : "Some content",
    mode : 'info'
  }  

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      backdrop: true,
      keyboard: true,
      backdropClick: true,
      size: 'lg',
      resolve: {
        data: function () {
          return $scope.data;
        }
      }
    });

演示 Plunker

enter image description here

指令方式

演示2 Plunker

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

HTML 的

<button class="btn btn-success" ng-click="open()" >success
          <my-alert
          bold-text-title="Done"
          text-alert="Some content"
          mode="success"
          ></my-alert>
</button>

指令

.directive('myAlert', function($modal,$log) {
      return {
        restrict: 'E',
        scope: {
          mode: '@',
          boldTextTitle: '@',
          textAlert : '@'
        },
        link: function(scope, elm, attrs) {

       scope.data= {
                mode:scope.mode,
                boldTextTitle:scope.boldTextTitle,
                textAlert:scope.textAlert
              }

       var ModalInstanceCtrl = function ($scope, $modalInstance, data) {

           console.log(data);

           scope.data= {
              mode:scope.mode || 'info',
              boldTextTitle:scope.boldTextTitle || 'title',
              textAlert:scope.textAlert || 'text'
          }
        };

        elm.parent().bind("click", function(e){
           scope.open();
       });

     scope.open = function () {

        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: ModalInstanceCtrl,
          backdrop: true,
          keyboard: true,
          backdropClick: true,
          size: 'lg',
          resolve: {
            data: function () {
              return scope.data;
            }
          }
        });


        modalInstance.result.then(function (selectedItem) {
          scope.selected = selectedItem;
        }, function () {
          $log.info('Modal dismissed at: ' + new Date());
        });
    }
  }
  };
})

希望能节省时间给某人。

Answer 2

我已经建立了一个服务和控制器，彼此依赖：

<!--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>

和html文件：

AlertService.alert('Some header', 'Some message', 'Text button');

现在，根据您要使用的类型，您有以下几种选择： - 如果你传递headerText，bodyText和buttonText，它将表现得像一个经典的警报模式

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

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

- 如果您传递headerText，bodyText，buttonText和方法，它将表现得像一个经典的警报模式，但具有您可以传递的函数，稍后可以在控制器中处理

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

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

- 最后一个。如果你传递了所有参数，它将像前一个一样，只是有可能取消和关闭模态。

.First()

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

从控制器那里你可以轻松地使用它，只需先注入它。

Answer 3

感谢您回答自己的问题，这很有帮助。

这是一个版本即服务，您可以从任何控制器接入和触发，而无需包含指令标记。

它使用最新的角度UI Bootstrap范例进行模态。

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

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

享受！

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);
    };
});

Bootstrap警报消息表示为模态，角度

3 个答案:

简单方法

指令方式