CODEWITHSUNDEEP
javascriptangularjsangular-material
Simon
Simon

Reputation: 2538

Cannot read property 'show' of undefined with $mdToast

I'm really struggling with this issue and I don't know what the matter is...

I'm going to leave out a lot of code, but this is essentially the jist of it... Based off the Angular material design guidelines this should work. I can't figure out for the life of me why it doesn't.

When I run the code I simply get an error: TypeError: Cannot read property 'show' of undefined

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="Main">
<!-- some stuff here -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.css">
</head>

<body ng-controller="MainCtrl as ctrl">
<div ng-click="executeToast()">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.js"></script>
</body>
</html>

controller:

angular.module('MainController', [
        'MainService',
        'MainDirective',
        'ngMaterial', 
        'ngMessages',
        'ngSanitize'
    ])
    .controller('MainCtrl', [ '$scope', '$sce', '$mdToast', function($scope, Main, $sce, $apply, $rootScope, $mdToast) {
      $scope.executeToast() = function() {
           $mdToast.show($mdToast.simple({
              hideDelay: 3000,
              position: 'top left',
              content: 'testing',
              toastClass: 'success'
            }));
      }
}]);

Any thoughts or possible solutions? Thanks!

Upvotes: 0

Views: 1198

Answers (1)

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

A couple of mistakes you made here :

1, In dependency injection sequence must be same, check more here

2, No need to pass $apply as a dependency,

Try this

 .controller('MainCtrl', [ '$scope', '$rootScope', '$mdToast','$sce', function($scope, $rootScope, $mdToast, $sce) {
      $scope.executeToast() = function() {
           $mdToast.show($mdToast.simple({
              hideDelay: 3000,
              position: 'top left',
              content: 'testing',
              toastClass: 'success'
            }));

Upvotes: 2

Related Questions