How to change template of toastr?

[yobre]

Hi, i'm trying to include angular-translate filter in the basic toastr message and i've modified the configuration of toastr in my app in this way:

.config ($translateProvider, uiGmapGoogleMapApiProvider, $breadcrumbProvider, toastrConfig) ->

  angular.extend(toastrConfig, {
    allowHtml: false,
    templates: {
      toast: """
        <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 | translate}}</div>
                <div ng-switch-default class="{{messageClass}}" aria-label="{{message}}">{{message | translate}}</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>
      """
    }
  })

But i'm getting this error in chrome console. Why?? I don't understand..

Error: [$compile:tplrt] Template for directive 'toast' must have exactly one root element. <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 | translate}}</div>
        <div ng-switch-default class="{{messageClass}}" aria-label="{{message}}">{{message | translate}}</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>

Thanks!

[Foxandxss]

The template is an url, not the template directly. Also you need to cache it before hand, that is a sane practice when overriding templates.

So in your case, in a .run method, you can do something like:

angular.module('yourapp').run(function($templateCache) {
  $templateCache.put('mycustomtoast.html', 'YOURTEMPLATEHERE');
});

And then you can do:

.config ($translateProvider, uiGmapGoogleMapApiProvider, $breadcrumbProvider, toastrConfig) ->
  angular.extend(toastrConfig, {
    allowHtml: false,
    templates: {
      toast: 'mycustomtoast.html'
    }
  })

[yobre]

Thanks @Foxandxss work fine!!! I finally have translating service inside my toastr!!

It remains only a small problem.. Now in console i'm getting this:

TypeError: Cannot read property 'protocol' of undefined
    at urlIsSameOrigin (angular.js:18054)
    at sendReq (angular.js:10551)
    at serverRequest (angular.js:10268)
    at processQueue (angular.js:14792)
    at angular.js:14808
    at Scope.$eval (angular.js:16052)
    at Scope.$digest (angular.js:15870)
    at Scope.$apply (angular.js:16160)
    at bootstrapApply (angular.js:1679)
    at Object.invoke (angular.js:4523)(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292processQueue @ angular.js:14800(anonymous function) @ angular.js:14808Scope.$eval @ angular.js:16052Scope.$digest @ angular.js:15870Scope.$apply @ angular.js:16160bootstrapApply @ angular.js:1679invoke @ angular.js:4523doBootstrap @ angular.js:1677bootstrap @ angular.js:1697onReady @ app.ng.coffee:88fire @ jquery.js:3143self.fireWith @ jquery.js:3255jQuery.extend.ready @ jquery.js:3467completed @ jquery.js:3498
angular.js:12520 Error: [$compile:tpload] Failed to load template: undefined (HTTP status: undefined undefined)
http://errors.angularjs.org/1.4.8/$compile/tpload?p0=undefined&p1=undefined&p2=undefined
    at angular.js:68
    at handleError (angular.js:17739)
    at processQueue (angular.js:14792)
    at angular.js:14808
    at Scope.$eval (angular.js:16052)
    at Scope.$digest (angular.js:15870)
    at Scope.$apply (angular.js:16160)
    at bootstrapApply (angular.js:1679)
    at Object.invoke (angular.js:4523)
    at doBootstrap (angular.js:1677)

Have you any ideas?

[Foxandxss]

That is a weird error but I think it is failing for another reason. I just tried on a demo project and it is not giving me that issue.

[yobre]

Ok @Foxandxss i've added simple toastr with i18n in home page of this project https://github.com/SimoneGatti/track

In this situation i'm getting only the second error and another new error:

TypeError: Cannot read property 'split' of undefined
    at Object.$delegate.get (templates-handler.js:13)
    at sendReq (angular.js:10528)
    at serverRequest (angular.js:10268)
    at processQueue (angular.js:14792)
    at angular.js:14808
    at Scope.$eval (angular.js:16052)
    at Scope.$digest (angular.js:15870)
    at Scope.$apply (angular.js:16160)
    at HTMLAnchorElement.<anonymous> (angular.js:23618)
    at HTMLAnchorElement.jQuery.event.dispatch (jquery.js:4665)(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292processQueue @ angular.js:14800(anonymous function) @ angular.js:14808Scope.$eval @ angular.js:16052Scope.$digest @ angular.js:15870Scope.$apply @ angular.js:16160(anonymous function) @ angular.js:23618jQuery.event.dispatch @ jquery.js:4665elemData.handle @ jquery.js:4333
angular.js:12520 Error: [$compile:tpload] Failed to load template: undefined (HTTP status: undefined undefined)
http://errors.angularjs.org/1.4.8/$compile/tpload?p0=undefined&p1=undefined&p2=undefined
    at angular.js:68
    at handleError (angular.js:17739)
    at processQueue (angular.js:14792)
    at angular.js:14808
    at Scope.$eval (angular.js:16052)
    at Scope.$digest (angular.js:15870)
    at Scope.$apply (angular.js:16160)
    at HTMLAnchorElement.<anonymous> (angular.js:23618)
    at HTMLAnchorElement.jQuery.event.dispatch (jquery.js:4665)
    at HTMLAnchorElement.elemData.handle (jquery.js:4333)

[Foxandxss]

And only happens with a toastr with custom template? Try without a custom template.

[yobre]

Without the custom template everything works correctly

[Foxandxss]

I don't think it is related to toastr itself. What is that template-handler.js? A meteor thing? Also jquery in the middle of those errors.

I have no idea at all.

[yobre]

Hi @Foxandxss, I finally realized I could solve my problem with a much simpler solution.I will illustrate below ..

toastr.success($filter("translate")("LANGUAGE_CHANGED"))

I avoided changing the template toastr using the original.

I wanted to thank you for the timely support that you provided to me. Thank you and good job.