AngularJs中完成全局提示框

2019年8月27日 257次阅读 来源: savokiss

源码

媒介

想给项目中增加一个全局提醒，发明这本书里恰好有这个例子：《用angularjs开辟下一代web运用》，就直接拿来用了，下面把代码简朴总结一下，同时也发明coding.net和worktile上的全局提醒结果也相似，今后研究一下看有什么差别也总结到这里咯

啥样

就直接用bs的正告框啦~，Duang~
《AngularJs中完成全局提示框》

功用

  • 能够设置message和type，type就是bs内置的几种色彩

  • 默许提醒3秒框自动封闭，或许点击x号封闭

代码

模板

<div class="alert alert-{{type || 'info'}}" ng-show="message">
    <button type="button" class="close"  ng-click="hideAlert()">
        <span class="glyphicon glyphicon-remove"></span>
    </button>
    {{message}}
</div>

指令

/**
 * 提醒框
 */
commonToolDirectives.directive('alertBar',[function(){

  return {
    restrict: 'EA',
    templateUrl: 'src/common/views/alertBar.html',
    scope : {
      message : "=",
      type : "="
    },
    link: function(scope, element, attrs){

      scope.hideAlert = function() {
        scope.message = null;
        scope.type = null;
      };

    }
  };
}]);

效劳

/**
 * 提醒框数据
 */
commonServices.factory('TipService', ['$timeout', function($timeout) {
  return {
    message : null,
    type : null,
    setMessage : function(msg,type){

      this.message = msg;
      this.type = type;

      //提醒框显现最多3秒消逝
      var _self = this;
      $timeout(function(){
        _self.clear();
      },3000);
    },
    clear : function(){
      this.message = null;
      this.type = null;
    }
  };
}]);

用法

  1. 由于是全局提醒，所以就只有一个，在index.html中增加：

    <!--全局提醒框-->
<alert-bar class="alert_bar" message="tipService.message" type="tipService.type"></alert-bar>

    同时保证他的z-index最高

  2. 然后由于需要在页面上直接接见tipService，需要在最外层controller（假如没有能够直接绑定到$rootScope)中绑定:

    //提醒信息效劳
$scope.tipService = TipService;

  3. 挪用的时刻在c中直接设置message和type就能够了

    TipService.setMessage('登录胜利', 'success');

    固然从上面的模板代码能够看到，假如不传第二个参数，type默许是info，也就是谁人蓝色的

结果

我的结果就是如许啦~
《AngularJs中完成全局提示框》

末了

东西比较少没有封装成ng模块，基础的需求能够完成，有时机照样要看看人家是怎么做这个全局提醒的，嗯！

    原文作者：savokiss
    原文地址: https://segmentfault.com/a/1190000003908448
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞