angular-toastr: TypeError: newToast.scope.init is not a function

I’m using angular-toastr in my project and i’ve got this error, when first toastr appears.

TypeError: newToast.scope.init is not a function
  File http://page.com/js/vendor.js line 73525 col 15 in _notify/</</<
  File http://page.com/js/vendor.js line 22503 col 27 in processQueue
  File http://page.com/js/vendor.js line 22519 col 27 in scheduleProcessQueue/<
  File http://page.coml/js/vendor.js line 14151 col 7 in completeOutstandingRequest
  File http://page.com/js/vendor.js line 14539 col 7 in Browser/self.defer/timeoutId<

Unfortunately, this error appear always on server (for first toastr) and only one on my local machine.

This is my config:

angular.extend(toastrConfig, {
  closeButton: false,
  iconClasses: {
    info: 'toast-message',
    warning: 'toast-cart'
  },
  templates: {
    toast: 'templates/common/services/alersts_service/alertsServ.html'
  }
});

I’m inlcuding angular-toastr.tpls.js script in my html files.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 43 (20 by maintainers)

Most upvoted comments

THE FIX:

I’ve had this problem for ages and just ignored it, but I finally got to it. Someone here even pointed it out and it worked. $templateCache.




    app.config(function (toastrConfig:any) {
        angular.extend(toastrConfig, {
            allowHtml: false,
            closeButton: false,
            closeHtml: '<button>&times;</button>',
            extendedTimeOut: 1000,
            iconClasses: {
                error: 'toast-error',
                info: 'toast-info',
                success: 'toast-success',
                warning: 'toast-warning'
            },
            messageClass: 'toast-message',
            onHidden: null,
            onShown: null,
            onTap: null,
            progressBar: false,
            tapToDismiss: true,
            templates: {
                toast: 'toast.html',
                progressbar: 'progressbar.html'
            },
            timeOut: 5000,
            titleClass: 'toast-title',
            toastClass: 'toast'
        });
    });


    app.run(['$templateCache',function ($templateCache:any) {
        
        $templateCache.put('toast.html', `
            <div class="{{toastClass}} {{toastType}}" ng-click="tapToast()">
                <div ng-switch on="allowHtml">
                    <div ng-switch-default ng-if="title" class="{{titleClass}}" aria-label="{{title}}">{{title}}</div>
                    <div ng-switch-default class="{{messageClass}}" aria-label="{{message}}">{{message}}</div>
                    <div ng-switch-when="true" ng-if="title" class="{{titleClass}}" ng-bind-html="title"></div>
                    <div ng-switch-when="true" class="{{messageClass}}" ng-bind-html="message"></div>
                </div>
                <progress-bar ng-if="progressBar"></progress-bar>
            </div>`);

        $templateCache.put('progressbar.html', `<div class="toast-progress"></div>`);



    }]);

you’ll notice that I changed the config so toast.html and progressbar.html have no paths.
Then I force toast.html and progressbar.html into the cache.

I think the problem was simply that the template just didn’t load fast enough. Was driving me nuts, because I couldn’t get it to happen on my local server, but the production machine had the bug.

Anyway, if you’re having trouble, try just cutting and pasting that code into yours. If it works, boom, you’re done.

danielcmorris on Mar 31, 2017

It should be fixed, but apparently not. Would you be able to reproduce this in a plunker or a little project at github? I would like to try.

Foxandxss on Oct 12, 2016

I will release a new version without replace: true for this weekend and hopefully fix this.

Foxandxss on Jul 21, 2016

Just got this, just took over a project using ng-toastr … I don’t have the background on this, but I see the toast is working, and here a certain scope.init is expected but I don’t see where it would be defined.

Here it’s expected, and my fix is inside:

        newToast.open.promise.then(function() {
            _createOrGetContainer(options).then(function() {
                newToast.isOpened = true;
                if (options.newestOnTop) {
                    $animate.enter(newToast.el, container).then(function() {
                        if (newToast.scope.init) newToast.scope.init();
                    });
                } else {
                    var sibling = container[0].lastChild ? angular.element(container[0].lastChild) : null;
                    $animate.enter(newToast.el, container, sibling).then(function() {
                        if (newToast.scope.init) newToast.scope.init();
                    });
                }
            });
        });

bjorn-ali-goransson on May 17, 2016

That will work for sure (if you don’t mind the extra dep).

It is not like I don’t want to fix the error, but I can’t spend dozen of hours trying everything to find your issue. I really need a way to know how you managed to get the error so I can see it myself, create a test and fix it. I can’t do it blind.

Foxandxss on Sep 16, 2015