angularjs – 表示为模态,角度的Bootstrap警报消息

Bootstrap 3提供 Bootstrap: event messages：成功,信息,警告,危险.

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

有没有简单的方法在Angular中用modal包装事件？

这是我开始玩的template

解决方法

我会回答我自己的问题.

简单的方法

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

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

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

模式可能是：成功,危险

模态实例控制器：

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

指令方式

演示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,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',resolve: {
            data: function () {
              return scope.data;
            }
          }
        });


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

希望它能节省时间给某人.