Toast-Nachricht kann nicht mit Ionicframework angezeigt werden

Question

Ich bin extrem neu in der Welt der mobilen Entwicklung und arbeite mit ionischen Rahmen.

Alles, was ich versuche zu tun, ist eine Toast-Nachricht an den Benutzer anzuzeigen, indem Sie diesem tutorial folgen und bis jetzt bin ich einfach verrückt zu versuchen, es zu implementieren.

Der Fehler I erhalten, wie folgend

Kann nicht Eigentum 'Toast' undefinierter

1. Ich habe installed cordova
2. Ich habe installed der Toast-Plugin

lesen

in meinem Index.html I das Skript von 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> 

Muss ich hinzufügen, um die Toast.js Datei in index.html zu hinzugefügt haben? Wenn ja, dann hilft das auch nicht und führt zu einem anderen Fehler.

Dies ist mein 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'); 
     }); 
    }; 
    } 
    ]); 

was ich hier fehlt?

Ich werde wirklich jede Hilfe zu schätzen wissen.

UPDATE

Nach Änderungen, vorgeschlagen von @Del, erscheint folgende Fehler

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) 

Answer 1

Wenn das Plugin korrekt installiert ist, ich es $ cordovaToast verwendet haben

.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'); 
     }); 
    }; 
    } 
    ]); 

ohne

Sie müssen die ng-cordova oder toast.js nicht hinzufügen.

Wenn Sie das Plugin (ionische Plugin hinzufügen ...) hinzufügen, entfernen Sie die Plattform, fügen Sie wieder, und zu bauen, sollte es funktionieren

Answer 2

Sie versuchen $cordovaToast auf Browser ausgeführt werden. Es wird nicht funktionieren, weil es ein natives Plugin ist. Bitte verwenden Sie es auf einem echten Gerät oder Emulator.

Answer 3

Ich bin auch neu in ionischen aber ich habe wenig Wissen über android so dann fand ich die Art und Weise, wie Android-Funktionen zu verwenden, in ionischen Mitteln fand ich die Art und Weise eigene Plugins von here.

nach aus folgenden Schritten so zu erstellen den angegebenen Link Ich habe ein eigenes Plugin erstellt Sie können es sehen ionic plug @ github.

müssen Sie die einfachen 4 Schritte folgen, die bei git link erwähnt werden.

hoffentlich wird es Ihnen helfen, das gleiche Problem zu lösen.

Answer 4

Dieser Fehler wird auch auf dem echten Gerät nicht verschwinden, es sei denn, Sie injizieren die Abhängigkeit für $ cordovaToast. Sie können $ cordovaToast im Controller verwenden oder entfernen, und dies hat keine Auswirkungen auf das Funktionieren. Es ist ratsam, Abhängigkeiten zu behalten. Der entscheidende Schritt, der in allen Antworten fehlt, ist die Einführung von DI für ngCordova in dem Modul, zu dem UsersControllers gehört. Das Beispiel von JSalaat hervorgehoben hat dieses Controller

foodShop.controller ('cartController', function ($ Umfang, cartFactory, $ cordovaToast)

und das Foodshop Modul ngCordova injiziert.

var Foodshop = angular.module ('Foodshop' [ 'ionisch', 'Feuerbasis', 'ngCordova'])

Da das Plug-In zu ngCordova gehört, muss es nicht separat in der Steuerung eingeführt werden. Dies erklärt, warum in dieser Anwendung kein Fehler vorliegt.

in Ihrem Fall versuchen, die App-Instanz Schöpfung wie

var app = angular.module aussehen könnte ('App', [ 'ionische', 'ngCordova'])

wenn nicht Sie werden weiterhin den Unbekannten Provider haben: $ cordovaToastProvider Fehler