Ionic/Cordova: Как интегрировать плагины Cordova в существующий проект Ionic?

Ответ 1

Выполните следующие действия:

1. Включить ngCordova до cordova.js

Вы можете найти то же описание в документах.

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

2. Добавьте плагин в командной строке

Этот раздел можно найти в документации в разделе вашего конкретного плагина.

ionic plugin add org.apache.cordova.camera

3. Помните, что кордова недоступна при работе в браузере

Поэтому при использовании $cordovaCamera.getPicture библиотека вызывает внутренне navigator.camera.getPicture, которая недоступна при разработке в браузере рабочего стола. Дальнейшее чтение

В настоящее время команда ngCordova/Ionic работает над mocks, которую вы можете использовать, чтобы избежать подобных проблем.

Вы можете скачать ngCordova здесь: http://ngcordova.com/docs/install/

Обновить: теперь Ionic Native, это похоже на ngCordova, но для ES6 и TypeScript.

Ответ 2

Откройте терминал в корневом каталоге приложения и добавьте плагин через

cordova plugin add org.apache.cordova.camera

Edit:
новая команда:

cordova plugin rm cordova-plugin-camera //remove
cordova plugin add cordova-plugin-camera //add

Ответ 3

Я пытаюсь понять, как использовать стандартные плагины Cordova с самой ионикой, но ионная команда недавно построила ngCordova - обертку angular для общих API-интерфейсов cordova, которая включает в себя Camera api, который вы хотите использовать. Предлагает использовать это: см. их документы для получения дополнительной информации.

Ответ 4

Это обычная проблема при тестировании в браузере: http://ngcordova.com/docs/common-issues/

Ответ 5

Вам нужно ввести Camera в контроллер, например:

.controller('MyCtrl', function($scope, Camera) {

Обратите внимание, что перед Camera нет знака доллара. Это действительно должно быть документировано более четко.

Кроме того, вам нужно будет добавить factory к вашим services.js:

.factory('Camera', ['$q', function($q) {

  return {
    getPicture: function(options) {
      var q = $q.defer();

      navigator.camera.getPicture(function(result) {
        // Do any magic you need
        q.resolve(result);
      }, function(err) {
        q.reject(err);
      }, options);

      return q.promise;
    }
  }
}])

Ответ 6

Вы можете установить плагин запустите:

$ cordova plugin add org.apache.cordova.camera

Теперь, когда у вас установлен плагин, вы можете использовать API-интерфейс камеры из своего Javascript:

function takePicture() {
  navigator.camera.getPicture(function(imageURI) {

    // imageURI is the URL of the image that we can use for
    // an <img> element or backgroundImage.

  }, function(err) {

    // Ruh-roh, something bad happened

  }, cameraOptions);
}

Это заставит пользователя сделать снимок и вернет локальный URL-адрес изображения, которое вы затем сможете использовать внутри тега или использовать для фонового изображения CSS.

Вы можете использовать приведенный ниже код для простой обертки над плагином камеры, что упрощает асинхронное захват фотографий:

module.factory('Camera', ['$q', function($q) {

  return {
    getPicture: function(options) {
      var q = $q.defer();

      navigator.camera.getPicture(function(result) {
        // Do any magic you need
        q.resolve(result);
      }, function(err) {
        q.reject(err);
      }, options);

      return q.promise;
    }   } }]);

Этот factory может использоваться в ваших контроллерах следующим образом:

.controller('MyCtrl', function($scope, Camera) {

  $scope.getPhoto = function() {
    Camera.getPicture().then(function(imageURI) {
      console.log(imageURI);
    }, function(err) {
      console.err(err);
    });
  };

Что откроет Камеру при вызове getPhoto() (например, нажатием кнопки).

В зависимости от того, как вы запрашиваете данные с камеры и используете их в своей разметке Angular, вам может потребоваться переименовать изображения в белый список, чтобы Angular разрешал файлы://URL (например, если вы используете ng -src для тега):

module.config(function($compileProvider){
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})