Ionic / Cordova: comment intégrer les Plugins Cordova dans un projet ionique existant?

Suivez ces étapes:

1. Inclure ngCordova avant cordova.js

Vous pouvez trouver la même description dans la doc.

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

2. Ajouter votre plugin sur la ligne de commande

Vous pouvez trouver cette étape dans les docs dans la section de votre plugin spécifique.

ionic plugin add org.apache.cordova.camera

3. Rappelez-vous que cordova n'est pas disponible pendant le travail navigateur

donc en utilisant le $cordovaCamera.getPicture la bibliothèque appelle en interne navigator.camera.getPicture qui n'est pas disponible lors du développement dans le navigateur de bureau. autres lectures

l'équipe ngCordova / ionique est actuellement travail sur les objets fantaisie vous pouvez utiliser pour éviter de tels problèmes.

vous pouvez télécharger ngCordova ici: http://ngcordova.com/docs/install/

mise à Jour: Il y a Ionique Indigène maintenant, c'est comme ngCordova mais pour ES6 et dactylographier.

ouvrez un terminal dans le répertoire racine de votre application et ajoutez le plugin via

cordova plugin add org.apache.cordova.camera

Modifier:

la nouvelle commande est:

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

j'essaye de comprendre comment utiliser les plugins standard de Cordova avec Ionic moi-même, mais l'équipe ionic vient de construire ngCordova--un enveloppeur angulaire pour les API de cordova communes, qui inclut l'api de Caméra que vous voulez utiliser. Conseille: voir leurs docs pour plus d'info.

Ceci est un problème courant lors des tests sur un navigateur: http://ngcordova.com/docs/common-issues/

vous devez injecter Camera dans le contrôleur, comme suit:

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

notez qu'il n'y a pas de signe de dollar avant Camera. Cela devrait vraiment être documenté plus explicitement.

de plus, vous devrez ajouter une usine à vos 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;
    }
  }
}])

Vous pouvez installer le plugin par lancer :

$ cordova plugin add org.apache.cordova.camera

maintenant que vous avez installé le plugin, vous pouvez utiliser L'API caméra à partir de votre 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);
}

ceci demandera à l'utilisateur de prendre une photo, et retournera l'URL locale de l'image que vous pouvez ensuite utiliser à l'intérieur d'une étiquette ou utiliser pour une image de fond CSS.

vous pouvez utiliser le code ci-dessous pour un simple wrapper sur le plugin de caméra qui le rend facile à saisir asynchrone photos:

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

Cette usine peut être utilisé dans vos contrôleurs comme ceci:

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

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

qui ouvrira la caméra lorsque getPhoto() est appelé (à partir d'un clic de bouton, par exemple).

selon la façon dont vous demandez les données à la caméra et de l'utiliser dans votre marqueur angulaire, vous pouvez avoir à whitelist image URLs si Angular permet fichier: / / URLs (par exemple, si vous utilisez ng-src pour une étiquette):

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