이 기사에서는 AngularJS에서 토스터를 사용하여 알림을 표시하는 방법을 보여줍니다.
AngularJS Toaster는 toastr non-blocking notification jQuery 라이브러리의 AngularJS 포트입니다. CSS3 변환을 위해서는 AngularJS v1.2.6 이상이 필요합니다.
AngularJS에 알림을 표시하려면 Nuget Package Manager에서 토스터를 설치하거나 https://github.com/jirikavi/AngularJS-Toaster에서 직접 다운로드해야합니다.
공유 레이아웃 또는 기본 index.html에 토터 추가
|
1
2
3
4
|
<div class="page-content">
<toaster-container toaster-options="{'close-button':true, 'time-out':{ 'toast-success': 2000, 'toast-error': 7000 } }"></toaster-container>
@RenderBody()
</div>
|
cs |
이제 AngularJS 컨트롤러의 토스터를 사용하여 알림에 성공 메시지를 표시하거나 오류 메시지를 표시 할 수 있습니다.
|
1
2
3
4
5
6
|
$scope.edit = function (invoiceTemplate) {
invoiceTemplateService.update(invoiceTemplate).then(function (response) {
toaster.success({ title: "Success", body: "Your data has been successfully saved !" });
$scope.modalInstance.close();
}, function (error) { toaster.error("Error", error.message); });
}
|
cs |