javascript - angularJS，一个通知部分或模态，加载几秒钟然后消失

Question

嗨，我目前正在使用 AngularJS NodeJs 构建一个应用程序。其中一项功能是让个人能够从该应用程序发送电子邮件。为此，他们单击一个按钮，打开一个模式窗口。他们填写表格，然后点击发送。这将导调用子邮件发送并关闭窗口。一旦模式窗口关闭并且我从 Node 收到电子邮件已成功发送的响应，我希望有一种简单的方法来向用户显示气泡/模式或消息，简单地说“电子邮件已成功发送”。理想情况下，我希望此消息出现 10 秒左右，然后消失。

有人对如何以简单的方式实现这一点有任何建议吗？

Answer 1

这是一个link to JSFiddle使用过的 Angular toastr 和模拟的失败和成功场景

HTML:

<div class="container" ng-controller="emailCtrl">
  <div class="btn btn-danger" ng-click="errorEmailReq()">Send Email Failed       
  </div>
  <br/><br/>
  <div class="btn btn-success" ng-click="successEmailReq()">Send Email Success
  </div>
</div>

<toaster-container toaster-options="{'time-out': 10000}"></toaster-container>

JS:

var myApp = angular.module('myApp', ['toaster']);

myApp.controller('emailCtrl', function ($scope, $http, toaster, $timeout) {
    $scope.errorEmailReq = function () {
        //Some API call for failure
        $http.get("/email_for_failure").error(function(){
         toaster.pop("error", "", "Email Delivery Failed");
        });
    };

    $scope.successEmailReq = function () {
        //Some API call for success
        $http.get("/").success(function () {
          toaster.pop("success", "", "Email sent successfully");
        });
    };
});

//模拟邮件发送请求失败

myApp.factory("httpErrorInterceptor", ["$q", function ($q) {
    var myInterceptor = {
        "responseError": function () {
            return $q.reject("This is not a real failure call -- simulation");
        }
    };
    return myInterceptor;
}]);

myApp.config(["$httpProvider", function ($httpProvider) {
    $httpProvider.interceptors.push("httpErrorInterceptor");
}]);