angularJS, уведомление частичное или модальное, которое загружается в течение нескольких секунд, а затем исчезает

Question

Привет В настоящее время я создаю приложение с помощью angularJS nodeJs. Одна из особенностей заключается в том, чтобы люди могли отправлять электронное письмо из приложения. Для этого нажмите кнопку, которая открывает модальное окно. Они заполняют форму и затем нажимают отправить. Это приводит к тому, что электронная почта отправляет и закрывает окно. Как только модальное окно закрывается, и я получаю ответ от узла, что письмо было успешно отправлено, я хотел бы иметь простой способ отображения пузыря/модального или сообщения для пользователя, которое просто говорит: «Электронная почта была успешно отправлена». В идеале я хотел бы, чтобы это сообщение появилось как 10 секунд, а затем исчезло.

Есть ли у кого-нибудь предложения по тому, как реализовать это в простой манере?

Answer 1

Вот такой link to JSFiddle Используется угловой тостер и смоделированные неудачи и успех сценариев

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

Answer 2

Открыть способ, как обычно, и в его контроллере использовать $timeout для вызова $modalInstance.dismiss(); через x секунд. И.Е.

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

Answer 3

Если вы готовы добавить JQuery (или, если у вас уже есть он включен в ваш проект), вы можете использовать toastr. Существует даже реализация тоста, выполненная для работы с угловымJS, here.