angular-directive 基于bootstrap封装的分级模态提示框

angular-directive 基于bootstrap封装的分级模态提示框

/**

• Created by qqian on 2016/03/21.
• level danger\info\success\warning
• title 为模态框的标题
• name 为模态框的id
• <alert level="danger" mtitle="警告的内容" name="id" ></alert>
  */
  define(['app-module','ui-bootstrap'], function(app) {
  var alertDirective = function () {
  return {
  restrict: 'E',
  scope: {
  name: '@',
  mtitle: '@',
  okFunc: '&',
  level:'@'
  },
  template: '<div class="modal fade in open" id="{{name}}" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">' +
  '<div class="modal-dialog vdmc-alert">' +
  '<div class=" alert alert-{{level}} row">'+
  '<div class="modalimg">'+
  '<i ng-if=" level===\'danger\'" class="glyphicon glyphicon-remove-circle "></i>'+
  '<i ng-if=" level===\'info\'" class="glyphicon glyphicon-info-sign "></i>'+
  '<i ng-if=" level===\'success\'" class="glyphicon glyphicon-ok-circle "></i>'+
  '<i ng-if=" level===\'warning\'" class="glyphicon glyphicon-alert "></i>'+
  '</div>'+
  '<div class="modaltitle">'+
  '<a class="close" ng-click="okFunc()">×</a>'+
  '<div>'+
  '<b ng-if=" level===\'danger\'">操作失败！</b>'+
  '<b ng-if=" level===\'info\'">提示：</b>'+
  '<b ng-if=" level===\'success\'">操作成功！</b>'+
  '<b ng-if=" level===\'warning\'">警告：</b>'+
  '</div>'+
  '<div>{{mtitle}}</div>'+
  '</div>'+
  '</div>'+
  '</div>' +
  '</div>',
  replace: true,
  link: function (scope, element) {
  var $ele = $(element), modalId = '#' + scope.name;
  $ele.on("click", ".close", function () {
  $(modalId).modal('hide');
  $(modalId).remove();
  var modalback = $('.modal-backdrop');
  if (modalback.length > 0) modalback[modalback.length - 1].remove();
  });
  $('body').addClass('modal-open').append('<div class="modal-backdrop fade in"></div>');
  }
  };
  };
  app.directive("alert", alertDirective);
  });