Bootstrap alert message represented as modal, angular

Question

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

Answer 1

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.