AngularJs中实现全局提示框

mj 发布于2019-08-21 10:44 / 2150人阅读

摘要：源码前言想给项目中添加一个全局提示，发现这本书里刚好有这个例子用开发下一代应用，就直接拿来用了，下面把代码简单总结一下，同时也发现和上的全局提示效果也类似，以后研究一下看有什么不同也总结到这里咯啥样就直接用的警告框啦，功能可以设置和，就是内

源码

Demo

github

前言

想给项目中添加一个全局提示，发现这本书里刚好有这个例子：《用angularjs开发下一代web应用》，就直接拿来用了，下面把代码简单总结一下，同时也发现coding.net和worktile上的全局提示效果也类似，以后研究一下看有什么不同也总结到这里咯

啥样

就直接用bs的警告框啦~，Duang~

功能

可以设置message和type，type就是bs内置的几种颜色

默认提示3秒框自动关闭，或者点击x号关闭

代码模板


    
    {{message}}

指令

/**
 * 提示框
 */
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;
    }
  };
}]);

用法

因为是全局提示，所以就只有一个，在index.html中添加：

同时保证他的z-index最高

然后因为需要在页面上直接访问tipService，需要在最外层controller（如果没有可以直接绑定到$rootScope)中绑定:

//提示信息服务
$scope.tipService = TipService;

调用的时候在c中直接设置message和type就可以了

TipService.setMessage("登录成功", "success");

当然从上面的模板代码可以看到，如果不传第二个参数，type默认是info，也就是那个蓝色的

效果

我的效果就是这样啦~

最后

东西比较少没有封装成ng模块，基本的需求可以实现，有机会还是要看看人家是怎么做这个全局提示的，嗯！

GPU云服务器云服务器中实现单点登录 asp中实现登录 asp中实现文件 java中实现线程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86103.html

[译] 通过 Webpack 实现 AngularJS 的延迟加载

摘要：虽然这些东西都是非常棒的，但是它们都不是实现延迟加载所必需的东西。我们通过的配置对象中的属性就可以实现延迟加载。单元测试的技巧把改成是全局依赖并不意味着你应该从控制器中删除它。因为在单元测试中，你只会加载这一个控制器而非整个应用模块。原文链接：http://michalzalecki.com/lazy-load-angularjs-with-webpack/ 随着你的单页应用扩大，...

Zhuxy 2019-08-19 17:42 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（九）—用户登录

摘要：好了，废话少说，继续吧这一章主要讲利用控制用户登录。在前面的用户注册表单中使用了的响应式表单。在构造函数中声明了一个对象一个对象和对象对象。并在构造函数中用的方法更新了网页的标题。接下来导航到下一个页面，并提示用户登录成功。最近工作比较忙，一直没有更新文章。原来看别人的文章感觉很过瘾，现在自己写才发现，要坚持下去真的很难。好了，废话少说，继续吧！这一章主要讲利用angularJs控制...

Snailclimb 2019-08-30 14:21 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（九）—用户登录

摘要：好了，废话少说，继续吧这一章主要讲利用控制用户登录。在前面的用户注册表单中使用了的响应式表单。在构造函数中声明了一个对象一个对象和对象对象。并在构造函数中用的方法更新了网页的标题。接下来导航到下一个页面，并提示用户登录成功。最近工作比较忙，一直没有更新文章。原来看别人的文章感觉很过瘾，现在自己写才发现，要坚持下去真的很难。好了，废话少说，继续吧！这一章主要讲利用angularJs控制...

opengps 2019-08-22 15:57 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（四）--- 深入视图，模板系统，模块和依赖注

摘要：模块和依赖注入细心的读者可能已经发现了，到目前为止所用到的例子都是使用的全局的构造函数来定义控制器的。这非常的简单，只需使用如下参数来调用即可控制器的名字字符串类型控制器的构造函数全局定义的控制器构造函数只适用于快速示例和原型开发。上一篇：【译】《精通使用AngularJS开发Web App》（三）下一篇：书名：Mastering Web Application Develop...

zr_hebo 2019-08-19 14:29 评论0 收藏0