.init() is not a function

[Foxandxss]

I am going to put this in a new issue so I can track it.

So @dcardosods I can understand that some issues are a real pain to reproduce, so tell me some details.

It happens on a first toast? (First meaning that there is no toast open at that time). Is there any process closing toast by hand (using .close)? Perhaps asynchrony, custom template...

I need all information possible so I can try to replicate it.

[hmaxs]

I had this problem that actually happened on a very first toast, with a very simple and basic usage. (not async templates, etc). I solved this (indirectly) by moving init & close methods (& adapting a bit the logic) in a controller for the directive. Maybe that will help, maybe not...

[Foxandxss]

@hmaxs would be interesting to have it replicated without those changes. A plunker with that basic usage and see it failing. With that I can fix it easily.

[hmaxs]

@Foxandxss i'll try that. But i think there is a question of chronology & latency involved anyhow, not sure it can be reproduced within a plunkr.

[Foxandxss]

Some issues are a real pain to reproduce. If you can manage to create a dummy project to reproduce it there (if plunker is not of any help) I will be really grateful too.

[cen1]

This error is kinda driving me crazy so here is all I know so far.. I hope it helps with anything:

1. I can't reproduce a plunkr with default template.
2. Including toastr tpl.js directly withing a script tag prevents the problem.
3. The one plunk that is always reproducible is http://embed.plnkr.co/RJaDKSJZk3hSSOrfQ9nv/preview but it uses custom template so it's irrelevant. But it does probably expose the underlying issue, which is that even default template is not loaded into cache for some reason. Also, including toastr through npm is a must to even try to reproduce the problem.
4. I checked our compiled app.js and it does include: $templateCache.put("directives/toast/toast.html" ..
5. It fails on first load and empty cache. So, if you visit a site it fails the first time, it will then work even after several reloads after that. But if you open a fresh browser it will fail again on first call.

[Foxandxss]

Oh man, if this drives you crazy, imagine to me :P.

I'll check what you say later when I get home. Plunker is no-no in mobile.

One thing for sure is needing to cache templates before hand always. That is the angular team convention for that.

[mdemoret]

Was anyone able to figure out a fix or a workaround to this? I just installed this library and I am running into the JavaScript runtime error: Object doesn't support property or method 'init' exception

[Foxandxss]

Do you have any reproduction? Or at least see what are you doing.

[mdemoret]

Im not really sure what was going on. I am still pretty new to Angular, HTML, javascript and anything else web related so I dont know really what the cause of the issue was but I can tell you what fixed it. I'm using Angular 1.5.0 and right before the init() exception I mentioned earlier, I noticed it was also showing another exception:

JavaScript runtime error: [$compile:multidir] Multiple directives [ngSwitchDefault, ngIf] asking for transclusion on:

To fix the issue I changed the template to:

<div class=\"{{toastClass}} {{toastType}}\" ng-click=\"tapToast()\">
    <div ng-switch on=\"allowHtml\">
        <div ng-if=\"title && !allowHtml\" class=\"{{titleClass}}\" aria-label=\"{{title}}\">{{title}}</div>
        <div ng-if=\"!title && !allowHtml\" class=\"{{messageClass}}\" aria-label=\"{{message}}\">{{message}}</div>
        <div ng-if=\"title && allowHtml\" class=\"{{titleClass}}\" ng-bind-html=\"title\"/>
        <div ng-if=\"!title && allowHtml\" class=\"{{messageClass}}\" ng-bind-html=\"message\"/>
    </div>
    <progress-bar ng-if=\"progressBar\"/>
</div>

And it seems to be working fine for me now. I'm guessing something else is going on here because I would be surprised if the default template was the cause of the issue. Let me know if this is a bad solution.

[Foxandxss]

That is really really really weird.

It works here: http://plnkr.co/edit/AdDp02hmas9AMbIb1a4f?p=preview

[mdemoret]

I agree its really weird. I inspected your demos on chrome to verify the same template was being used and it didn't have any problem with the ng-if and ng-switch directives on the same element.

I have only been developing in Internet Explorer 11 so that may be an issue. I haven't tested my own site on Chrome or Firefox though.

Anyways, sorry for the really random question. At least you built enough flexibility into the tool that I could work around the issue with just changing the config. Thanks for making a good product.

[Foxandxss]

No worries mate, I am here for all the issues you could find.

IE 11 doesn't sound like it could give an error like that.

[mbordogna]

For others seeing the same issue, it seems that in my case the init function doesn't exist because the directive link function is not called by the time the scope.init function is called.

it is difficult to nearly impossible to repro in plunker as it either requires a load on the digest cycle or server calls with toast being call in the promise to reproduce in our application.

Our scenario is that upon the "then" method from an ng-resource promise being called we show the toast.

If the toast is is still showing when we initiate another save and any others after that until they all are dismissed, we continue to get the init error.

We are using ng-resource for server communication.

I have created a fork with the corrections here that fixed it for me.

https://github.com/mbordogna/angular-toastr/tree/patch-1

[Foxandxss]

Even a github repository with a repro is good for me.

Still, I would also appreciate if the people having the .init() issue can test that patch out.

[tmundt]

Will the fork with the patch be merged soon to fix the issue?

I get this also, while I try to clear a toast to show another one (without the one being shown before). If I remove toastr.clear(), the error does not show up. Any ideas?

[Foxandxss]

I am not liking the given solution but I will if there is no other choice. I just need time to sit down and see, but dayjob is needing all my time currently.

[Foxandxss]

Could you all try the solution I put in master? replace: true was problematic and by removing it, it should fix some errors.

[sarapple]

Hi there, this looks to be a fairly old issue now. I'm using version 2.1.1 and it is still showing that error. Any way for that patch to be merged in?

[ecohort]

I'm using v. 2.1.1 and it is still showing that error!!

[dapriett]

Saw the same issue.

The problem is the $compile function here: https://github.com/Foxandxss/angular-toastr/blob/master/src/toastr.js#L270

Need to add a cloneAttachFn to the https://docs.angularjs.org/api/ng/service/$compile#

$compile(angularDomEl)(scope, function(clonedElement, scope) {
  // clonedElement is completed, open toast now...
);

Other option is to load template before opening with $templateRequest. It'll only be downloaded if not cached yet - return a promise.

https://docs.angularjs.org/api/ng/service/$templateRequest

$templateRequest(toastrConfig.templates.toast)
                       .then(function() {
                           console.log('Template is loaded!!')
                       });

[aldo-maciel]

I'm using preventOpenDuplicates: true on the provider and it works for me