引导警报消息表示为模态，角度 [英] Bootstrap alert message represented as modal, angular

问题描述

Bootstrap 3提供 Bootstrap:事件消息 :success, info, warning, danger.

Bootstrap 3 provides Bootstrap: event messages: success, info, warning, danger.

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

However sometimes the view doesn't have enough space to show up the event message.

是否有一种简单的方法可以用 modal 在Angular中?

Is there easy way to wrap event with modal in Angular?

这是我开始使用

推荐答案

我将回答我自己的问题.

I'll answer on my own question.

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

The flow is pretty simple and straightforward. We don't reinvent the wheel here.

我们既不需要页眉也不需要页眉:

We don't need nor header neither footer:

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

演示 柱塞

演示2 柱塞

Demo 2 Plunker

我们可以将以上所有编写的代码放入指令中，以实现更好的维护:

We can put all above written code into directive for better maintenance:

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

---

希望这可以节省别人的时间.

---

Hope it will save time to someone.

这篇关于引导警报消息表示为模态，角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！