Saadia Saadia - 3 months ago 97
AngularJS Question

Unable to show Toast message using Ionicframework

I am extremely new to the world of mobile development and I am working with ionic framework.

All I am trying to do is to display a toast message to the user by following this tutorial and so far I am just going crazy trying to implement it.

The error I get is as following


Cannot read property 'toast' of undefined



  1. I have installed cordova

  2. I have installed the Toast plugin



inside my index.html I have added the script of
ng-cordova.min.js


<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>


Do i need to add the
Toast.js
file in index.html too? If yes then that does not help either and leads to another error.

This is my controller

.controller('UsersController', ['$scope', '$http', '$cordovaToast', function ($scope, $http, $cordovaToast) {

$scope.showToast = function() {
$cordovaToast
.show("Here's a message", 'short', 'center')
.then(function(success) {
console.log('Success');
}, function (error) {
console.log('Error');
});
};
}
]);


What am i missing here?

I will really appreciate any help.

UPDATE

After making changes, suggested by @Del, the following error appears

ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $cordovaToastProvider <- $cordovaToast <- UsersController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24cordovaToastProvider%20%3C-%20%24cordovaToast%20%3C-%20UsersController
at ionic.bundle.js:13380
at ionic.bundle.js:17574
at Object.getService [as get] (ionic.bundle.js:17721)
at ionic.bundle.js:17579
at getService (ionic.bundle.js:17721)
at invoke (ionic.bundle.js:17753)
at Object.instantiate (ionic.bundle.js:17770)
at ionic.bundle.js:22326
at self.appendViewElement (ionic.bundle.js:56883)
at Object.switcher.render (ionic.bundle.js:54995)

Del Del
Answer

If the plugin is correctly installed, I have used it without using $cordovaToast

.controller('UsersController', ['$scope', '$http', function ($scope, $http) {

    $scope.showToast = function() {
      window.plugins.toast
        .show("Here's a message", 'short', 'center')
        .then(function(success) {
          console.log('Success');
        }, function (error) {
          console.log('Error');
        });
    };
  }
  ]);

You dont have to add the ng-cordova or toast.js.

If you add the plugin (ionic plugin add ...), remove the platform, add again, and build, it should work