angular 全局提示框

全局提示框使用了angular的一个插件lx-angular-alert，下载地址lx-angular-alert。在使用该插件时，为了更适合我的需要，我对插件做了一些小的修改，具体的在下面代码中会贴出来。

下载并引入

首先下载插件（lx-angular-alert），然后将插件引入，代码如下。

var app = angular.module('myApp', ['lx.alert']);

然后对指令的link属性做了一些修改，修改了提示框提示持续时间的函数，并添加了监控提示信息变化的函数，如下：

link: function (scope) {
  scope.alerts = [];
  scope.$watch('msgTimeout',function(val){
    if(val && val > 100){
      scope.service.setMsgTimeout(val);
    } else {
      scope.service.setMsgTimeout(3000);
    }
  });

  scope.$watch('service.type',function(){
    scope.alerts = [];
    scope.alerts.push({type: scope.service.type, msg: scope.service.msg});
  });
  // 新添加的监控
  scope.$watch('service.msg',function(){
    scope.alerts = [];
    scope.alerts.push({type: scope.service.type, msg: scope.service.msg});
  });
}

因为是要做全局的提示，这里将代码写在index.html中，对应的controller为index.controller.js

html中代码

<lx-alert data-service="lxAlert" ng-style="{top: (winHeight/2-52)+'px'}"></lx-alert>

这里alert提示框的位置计算方法为ng-style=”{top: (winHeight/2-52)+’px’}”，可以根据自己的需要进行调整。

controller中代码

angular.module('myApp').controller('IndexCtrl', function ($scope, $rootScope,$cookieStore, $lxAlert, Common) {
  $scope.winHeight = Common.getWindowsHeight();
  $rootScope.lxAlert = $lxAlert;
  $rootScope.lxAlert.setMsgTimeout(3000);
});

其中Common是自定义的factory。

angular.module('myApp').factory('Common', ['$http', '$q', '$cookieStore', '$location','$modal',
  function ($http, $q, $cookieStore, $location,$modal) {
    return {
      getWindowsHeight: function() {
        var winHeight = 0;
        // 获取窗口宽度
        // 获取窗口高度
        if (window.innerHeight) {
          winHeight = window.innerHeight;
        }else if ((document.body) && (document.body.clientHeight)) {
          winHeight = document.body.clientHeight;
        }
        // 通过深入Document内部对body进行检测，获取窗口大小
        if (document.documentElement && document.documentElement.clientHeight) {
          winHeight = document.documentElement.clientHeight;
        }
        return winHeight;
      }
    }
  }]);

使用

在前面的index.html和index.controller.js中将lxAlert配置好了，可以在系统中其他的地方使用了。具体如下：

$rootScope.lxAlert['success']('Hello，我是alert！');

如有不当的地方，请予指正！

补充

上面忘记贴提示框的CSS样式了，很简单

.lx-alert {
  position:absolute;
  top:50%;
  left:50%;
  width:300px;
  margin: 0 0 0 -152px;
  word-wrap: break-word;
  z-index: 100000;
}
.lx-alert .alert {
  min-height: 50px;
}