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

问题描述

Bootstrap 3 提供

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

HTML

指令

.directive('myAlert', function($modal,$log) {返回 {限制:'E'，范围: {模式: '@'，粗体文本标题: '@',文本警报:'@'},链接:函数(范围，榆树，属性){范围.数据= {模式:范围.模式，粗体文本标题:scope.boldTextTitle，textAlert:scope.textAlert}var ModalInstanceCtrl = 函数($scope，$modalInstance，数据){控制台日志(数据)；范围.数据= {模式:范围.模式 ||'信息'，boldTextTitle:scope.boldTextTitle ||'标题'，textAlert:scope.textAlert ||'文本'}};elm.parent().bind(点击"，函数(e){范围.open();});scope.open = 函数 () {var modalInstance = $modal.open({templateUrl: 'myModalContent.html',控制器:ModalInstanceCtrl，背景:真实，键盘:真的，背景点击:真实，尺寸:'lg'，解决: {数据:函数(){返回范围.数据；}}});modalInstance.result.then(function (selectedItem) {scope.selected = selectedItem;}， 功能 () {$log.info('Modal 在以下时间被驳回:' + new Date());});}}};})

---

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

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.

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

This is a template I started to play with

解决方案

I'll answer on my own question.

Simple way

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

We don't need nor header neither footer:

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

We even don't need to use ng-class:

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

where mode might be: success, info, warning, danger

---

Modal Instance Controller:

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

---

And this is modal configuration and content:

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

Demo Plunker

---

Directive way

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

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

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