angularJS，加载几秒钟然后消失的部分通知或模态通知

Question

您好，我目前正在使用 angularJS nodeJs 构建一个应用程序。其中一项功能是让个人能够从该应用程序发送电子邮件。为此，他们单击一个按钮，打开一个模式 window。他们填写表格，然后点击发送。这会导致电子邮件发送并关闭 window。一旦模态 window 关闭并且我从节点收到电子邮件已成功发送的响应，我希望有一种简单的方法来向用户显示 bubble/modal 或简单地说 [=15= 的消息].理想情况下，我希望此消息显示 10 秒然后消失。

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

Answer 1

像往常一样打开模式，在它的控制器中使用 $timeout 在 x 秒后调用 $modalInstance.dismiss();。即

$timeout(function(){ $modalInstance.dismiss(); }, 10000);

Answer 2

如果您愿意添加 jQuery（或者如果您已经将其包含在您的项目中），您可以使用 toastr。甚至还有一个用于 angularJS、here.

的 toastr 实现

Answer 3

这是一个link to JSFiddle 使用了 angular 台烤面包机并模拟了失败和成功的场景

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");
}]);

angularJS，加载几秒钟然后消失的部分通知或模态通知

angularJS, a notification partial or modal that gets loaded for a few seconds and then disappears

javascript

angularjs

node.js

modal-dialog

partial-views