Question

我对移动开发世界非常陌生，我正在使用离子框架。

我要做的就是按照这个tutorial向用户显示一个Toast消息，到目前为止我只是疯狂地试图实现它。

我得到的错误如下

无法读取未定义的属性'toast'

我有installed cordova
我有installed Toast插件

在我的index.html中我添加了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>

我还需要在index.html中添加Toast.js文件吗？如果是，那么这也无济于事并导致另一个错误。

这是我的控制器

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

我在这里缺少什么？

我真的很感激任何帮助。

更新

@Del建议进行更改后，出现以下错误

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

如果插件已正确安装，我已使用它而不使用$ 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');
        });
    };
  }
  ]);

您不必添加ng-cordova或toast.js。

如果您添加插件（离子插件添加...），删除平台，再次添加，并构建，它应该工作

Answer 2

您正尝试在浏览器上运行$cordovaToast。它不起作用，因为它是一个原生插件。请在真实设备或模拟器上使用它。

Answer 3

我也是离子新手，但我对android知之甚少，所以我找到了如何在离子方式中使用android函数的方法我找到了从here.创建自己的插件的方法

所以在从给定链接中执行了以下步骤后，我创建了一个自己的插件你可以看到它ionic plug @ github。

你需要遵循git link提到的简单4个步骤。

希望它可以帮助您解决同样的问题。

Answer 4

除非您为$ cordovaToast注入依赖项，否则此错误也不会在真实设备上消失。您可以使用或可能删除控制器中的$ cordovaToast，它不会影响工作。保持依赖关系是一种好习惯。所有响应中缺少的关键步骤是在UsersControllers所属的模块中为ngCordova引入DI。 JSalaat突出显示的示例包含此控制器

foodShop.controller（＆＃39; cartController＆＃39;，function（$ scope，cartFactory， $ cordovaToast）

并且foodshop模块注入了ngCordova。

var foodShop = angular.module（＆＃39; foodShop＆＃39;， [＆＃39;离子＆＃39;＆＃39;火力＆＃39;＆＃39; ngCordova＆＃39;]）

由于插件属于ngCordova，因此无需在控制器中单独引入。这解释了为什么该应用程序中没有错误。

在您的情况下，尝试创建应用实例可能看起来像

var app = angular.module（＆＃39; app＆＃39;，[＆＃39; ionic＆＃39;，＆＃39; ngCordova＆＃39;]）

如果没有，您将继续拥有未知提供商：$ cordovaToastProvider错误

Answer 5

记录：对于Ionic v2 / v3

安装依赖项
将其包含在离子项目中
如何使用它。

1。安装依赖项

在CLI中运行以下命令：

$ ionic cordova plugin add cordova-plugin-x-toast

$ npm install --save @ionic-native/toast

2。将其包含在离子项目中

1。在下面添加到app.module.ts

import { Toast } from '@ionic-native/toast';

....并进入@NgModule部分providers:[ HERE,]

2。要使用Toast的每个页面，您需要添加：

import { Toast } from '@ionic-native/toast';

....还添加到构造函数

constructor(private toast: Toast, ...){}

...现在您可以按以下示例使用它：

this.toast.show('message', 'duration', 'position').subscribe();

...或向控制台发送消息：

this.toast.show('message', 'duration', 'position').subscribe(
  toast=>{
    console.log(toast);
  }
);

无法使用Ionicframework显示Toast消息

5 个答案:

1。安装依赖项

2。将其包含在离子项目中