Fire notification toaster in any controller angularjs

Question

I am using this service for notifications: https://github.com/jirikavi/AngularJS-Toaster
Is working perfectly. Already configured for that anywhere in my application I c

Answer 1

i use the toastr in the following manner:

Include toastr in your index html:

<script type="text/javascript" src="/vendor/toastr/toastr.min.js"></script>

Define a factory which you can inject in any controller:

angular.module('app').value('ngToastr',toastr);

angular.module('app').factory('ngNotifier',function(ngToastr){
    return{
        notify: function(msg){
            ngToastr.success(msg);
        },
        notifyError: function(msg){
            ngToastr.error(msg);
        },
        notifyInfo: function(msg){
            ngToastr.info(msg);
        }
    }
});

After that you can inject this module in any controller:

angular.module('app').controller('myCtrl',function($scope, ngNotifier) {
    ngNotifier.notifyError($scope.validationError);
});

Answer 2

I like @AndreiC's answer. A year later, here is a more robust factory service I use:

.factory('notifierService',function(toaster){
    return{
        notify: function(msg){
                toaster.pop('success', 'Update Successful', 'The ' + msg + ' setting was updated');
        },
        notifyError: function(msg){
                toaster.pop('error', 'Something Went Wrong', 'Please check with an administrator');
        },
        notifyInfo: function(msg){
                toaster.pop('info', 'Information', 'The ' + msg + 'just happened' );
        }
    };
})

on the $resource promise

.$promise.then(function() {
     notifierService.notify('email server');
 });

Answer 3

you can use angular-toaster reference it to your index.html page and also add the css, after that configure the directive at the bottom of the page as the following:

<toaster-container toaster-options="{
  'closeButton': false,
  'debug': false,
  'position-class': 'toast-top-right',
  'onclick': null,
  'showDuration': '200',
  'hideDuration': '1000',
  'timeOut': '5000',
  'extendedTimeOut': '1000',
  'showEasing': 'swing',
  'hideEasing': 'linear',
  'showMethod': 'fadeIn',
  'hideMethod': 'fadeOut'
}"></toaster-container>

then add it to your angular module dependencies as 'toaster' (you already did it well) so after that you'll be able to inject toaster service on any controller you want like the following:

angular.module('myApp').controller('myController', [
    '$scope', 'toaster', function($scope,toaster) {

    toaster.pop('success', 'message', 'some message');

}]);

as the documentation says you can use a wide variety of options:

toaster.pop('success', "title", 'Its address is https://google.com.', 15000, 'trustedHtml', 'goToLink');
toaster.pop('success', "title", '<ul><li>Render html</li></ul>', 5000, 'trustedHtml');
toaster.pop('error', "title", '<ul><li>Render html</li></ul>', null, 'trustedHtml');
toaster.pop('wait', "title", null, null, 'template');
toaster.pop('warning', "title", "myTemplate.html", null, 'template');
toaster.pop('note', "title", "text");

so take a look to this plunkr