Toastr not working in conjuction with AngularJs

Question

I am trying to use Toastr with angular js, but getting the following error. I have included jquery.js file as expected.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

Error message:

angular.js:11594 TypeError: Cannot read property 'extend' of undefined

at m (toastr.js:474)
at Object.o [as info] (toastr.js:474)
at ProductTableController.showAddToCartToast (productTable.directive.js:207)
at ProductTableController.addToCart (productTable.directive.js:159)
at angular.js:12332
at f (angular.js:22949)
at a.$$ChildScope.$$ChildScope.$eval (angular.js:14383) at a.$$ChildScope.$$ChildScope.$apply (angular.js:14482) at HTMLButtonElement. (angular.js:22954) at HTMLButtonElement.dispatch (jquery.js:4670)(anonymous function) @ angular.js:11594(anonymous function) @ angular.js:8544$apply @ angular.js:14484(anonymous function) @ angular.js:22954dispatch @ jquery.js:4670r.handle @ jquery.js:4338

Any idea what's wrong ?

Thanks.

any error you getting in console ? – Punit Gajjar Nov 24 '16 at 06:43 — Punit Gajjar, Nov 24 '16 at 06:43
No, just the one I added in the question. – Ahsan Nov 24 '16 at 06:44 — Ahsan, Nov 24 '16 at 06:44
demo http://codeseven.github.io/toastr/demo.html – User Nov 24 '16 at 06:52 — User, Nov 24 '16 at 06:52

score 2 · Accepted Answer · answered Nov 24 '16 at 06:55

2

I think you included Jquery file after angular.js. Move your Jquery file above Angularjs file.

eg.

1. <script src ="jquery.min.js"></script>
2. <script src ="angular.min.js"></script>

answered Nov 24 '16 at 06:55

Ved

11,837
5
42
60

Close, toastr.js was above angular.js – Ahsan Nov 24 '16 at 07:22
oh.. I was knowing issue must be something like this. – Ved Nov 24 '16 at 07:25

score 0 · Answer 2 · answered Nov 24 '16 at 06:45

you can use angular-toastr library instead

install: bower install angular-toastr

include dependency: angular.module('app', ['ngAnimate', 'toastr'])

use in controller :

app.controller('foo', function($scope, toastr) {
  toastr.success('Hello world!', 'Toastr fun!');
});

Toastr not working in conjuction with AngularJs

2 Answers2