angular.js:13424 TypeError: d.scope.init is not a function

[sagargulati]

Angular 1.5.3

Getting this error when the first toast is called, after we have to click the toast to disable it, the it works fine.

angular.js:13424 TypeError: d.scope.init is not a function
    at angular-toastr.min.js:1
    at angular.js:15757
    at m.$eval (angular.js:17025)
    at m.$digest (angular.js:16841)
    at angular.js:17064
    at e (angular.js:5824)
    at angular.js:6100

var CMWebApp = angular.module('CMWebApp', ['ngRoute', 'ngAnimate', 'ngCookies', 'toastr','ngMaterial']);

CMWebApp.config(function(toastrConfig) {
  angular.extend(toastrConfig, {
    autoDismiss: true,
    maxOpened: 0,
    newestOnTop: true,
    positionClass: 'toast-bottom-right',
    preventDuplicates: false,
    preventOpenDuplicates: true,
    allowHtml: true,
    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: true,
    tapToDismiss: true,
    templates: {
      toast: appUrl + '/views/directives/toast/toast.html',
      progressbar: appUrl + '/views/directives/progressbar/progressbar.html'
    },
    timeOut: 3000,
    titleClass: 'toast-title',
    toastClass: 'toast'
  });
});

CMWebApp.config(function($routeProvider, $sceDelegateProvider, $locationProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    appUrl + '/**'
  ]);

  $routeProvider

    .when('/', {
    title: 'Homepage',
    templateUrl: appUrl + '/views/home.html',
    controller: 'mainCtrl'
  })

  $locationProvider.html5Mode({
    enabled: true,
  });

});

CMWebApp.controller('mainCtrl', function($scope, $rootScope, $sce, $route, $routeParams, $location, $http, $window, toastr) {

  $scope.$route = $route;
  $scope.$location = $location;
  $scope.$routeParams = $routeParams;
  $scope.domain = domain;
  $scope.home = webUrl;
  $scope.assets = appUrl;
  $scope.trustAsHtml = $sce.trustAsHtml;

  $scope.goTo = function(url) {
    $window.open(url, '_blank');
   toastr("Button clicked");
  }

  console.log("Page is loaded");

});

Please help!

[Foxandxss]

You need to cache (in templateCache) those templates or you will get than error. Are those templates custom your the default ones?

[sagargulati]

Those are the default ones, how do i cache the templates?

Thanks!

[Foxandxss]

Use the .tpls.js file that contains those. Also, you don't need to add the default values again in the config, just use it to override the ones you need.

[sagargulati]

Can you tell me how to do that? I am new to angularjs. I mean where to put the files, where and what to edit in the configuration? That will be really helpful.

Thanks!

[Foxandxss]

For now then, delete that config and where you import toastr.js import toastr.tpl.js

[sagargulati]

Removing template directive, changing .js to tpl.js? It worked, thanks :+1:

[sagargulati]

B/W What about $templateCache you told me?

[Foxandxss]

That is an angular service that caches the template for you, so you don't need to request them to the server. Here is the docs: https://docs.angularjs.org/api/ng/service/$templateCache

[sagargulati]

I saw that but i am asking how to use that in my condition of the app?

[Foxandxss]

Sorry, this goes really outside the purpose of this issue tracker.

[sagargulati]

Ok thanks :)