zoukankan      html  css  js  c++  java
  • angular实现统一的消息服务

    后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样?

    alert-msg

    自定义指令和服务实现

    自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失


    ###1. 显示消息 这种显示消息的方式是不是有熟悉又陌生,关键是简洁 ```js alertMsgServe.alert(resp.msg); ```
    ###2. 指令调用 放在页面的顶部 ```html
    ```
    ###3. 指令的定义 **javascript** ```js angular.module('myApp')

    .directive('alertMsg', function() {
    return {
    restrict: 'AE',
    scope: {
    alertMessages: "="
    },
    templateUrl: 'components/alert_msg/alert_msg.html'
    }
    })

    .service('alertMsgServe', ['$rootScope', '$timeout', function($rootScope, $timeout) {
    $rootScope.alertMessages = [];
    this.alert = function() {
    if (arguments.length == 0) return;
    var msgs = '';
    for (var i = 0; i < arguments.length; i++) {
    msgs += ' ' + arguments[i];
    }
    $rootScope.alertMessages.push(msgs);
    $timeout(function() {
    var x = $rootScope.alertMessages.shift();
    }, 3000 * $rootScope.alertMessages.length);

    }
    

    }])

    **template**
    ```html
    <div style="text-align:center;background-color:#CCC;">
        <p class="error" ng-repeat="msg in alertMessages">{{msg}}</p>
    </div>
    

    在需要的地方注入`alertMsgServe`服务后就可以像写alert一样愉快的输出消息了。。。
    #
  • 相关阅读:
    input file 上传图片并显示
    关于npm ---- npm 命令行运行多个命令
    webpack4.x 配置
    React的生命周期
    HTML5 meta 属性整理
    css 命名规范
    html5 标签 meter 和 progress
    .NET Linq TO XML 操作XML
    .NET 字符串指定规则添加换行
    Linux Centos上部署ASP.NET网站
  • 原文地址:https://www.cnblogs.com/wancy86/p/alert-msg2.html
Copyright © 2011-2022 走看看