4

Estoy tratando de enviar un e-mail al hacer click en un botón. He seguido un tutorial pero no funciona lo que he hecho.

Este es mi código:

app.js:

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('EmailController', function($scope) {
    $scope.sendFeedback= function() {
        if(window.plugins && window.plugins.emailComposer) {
            window.plugins.emailComposer.showEmailComposerWithCallback(function(result) {
                console.log("Response -> " + result);
            }, 
            "Feedback for your App", // Subject
            "",                      // Body
            ["[email protected]"],    // To
            null,                    // CC
            null,                    // BCC
            false,                   // isHTML
            null,                    // Attachments
            null);                   // Attachment Data
        }else{
          $scope.a='There is an error in your app' //siempre me imprime este else
        }
    }
});

index.html:

<ion-content ng-controller="EmailController">
  <button class="button" ng-click="sendFeedback()">send</button>
   <br>
  {{a}}
</ion-content>

Además, quisiera agregar lo siguiente:

  • La versión de mi ionic es 1.7.14

  • En el tutorial donde vi el plugin hace referencia a este repositorio git: primer repositorio y el plugin que yo instalé mediante ionic plugin add cordova-plugin-email-composer hace referencia a este otro: segundo repositorio

¿Por qué no funciona mi código? y ¿por qué los plugins son diferentes?

Si el error son los plugins ¿cómo puedo arreglar mi código?

1 respuesta 1

2

Antes que nada debo decirte que en cordova puedes abrir el programa de emails por defecto usando un link mailto: con este esquema de url incluso puedes especificar contenido para el cuerpo del mensaje

Haz click en el link que se muestra debajo para que puedas comprobar como funciona.

Usa ctrl + click si no abre al hacer click en él o usa el navegador Chrome.

 <a href="mailto:[email protected]?subject=This%20is%20the%20subject&[email protected]&body=This%20is%20the%20body">
    Send feedbak
</a>

Si lo que quieres es abrirlo directamente sin mostrarlo puedes crear un link sin insertarlo en el html y simular un click en el. Prueba el siguiente código en una página.

var feedback = document.createElement('a');
feedback.setAttribute('href', 'mailto://[email protected]?subject=This%20is%20the%20subject&[email protected]&body=This%20is%20the%20body');
feedback.click();

No obstante si quieres usar el plugin porque la funcionalidad del mailto: no es suficiente te recomiendo usar el segundo repositorio. Las razones son estas:

  • Si estas usando ionic deberías usar ng-cordova
  • Si usas ng-cordova deberías usar el plugin recomendado por ellos
  • Cada plugin recomendado tiene una referencia al repositorio original. Puedes encontrar esto en la documentación que te indica cual usar.

cordova plugin add https://github.com/katzer/cordova-plugin-email-composer.git

  • Si no usas un plugin recomendado deberías considerar hacerle un wrapper al plugin para que funcione con los promises de angular si este expone un api basado en callbacks. Esto muchas veces es lo único que hace ng-cordova, dependiendo del plugin.

Siguiendo esa lógica no debes tener problemas. Recuerda que los plugins son open-source por lo que cualquiera puede escribir uno.

En tu caso particular estás usando un método showEmailComposerWithCallback que pertenece al primer plugin por lo que no estará disponible en el segundo. Diferentes plugins exponen diferentes APIs.

Solución

Instala el plugin recomendado

cordova plugin add https://github.com/katzer/cordova-plugin-email-composer.git

Instala ng-cordova si aún no lo has hecho

bower install ngCordova

Usa el api de ng-cordova (Es sólo un wrapper del plugin y expone el inyectable $cordovaEmailComposer)

.controller('EmailController', function($scope) {
    $scope.sendFeedback= function() {
        if(window.plugins && window.plugins.emailComposer) {
            $cordovaEmailComposer.open({
                subject: 'Feedback for your App',
                body: '',
                to: '[email protected]'
            }).then(function() {
               // Se envió o se canceló el envio
            });
        }else{
          $scope.a ='There is an error in your app';
        }
    }
});

Como nota adicional si revisas el código fuente del plugin recomendado verás que lo que hace este es intentar abrir un link con el esquema de url mailto: internamente pero también traen funcionalidades adicionales como verificar si enviar correos es posible.

Si lo que quieres hacer es solamente ponerle un link en la app a los usuarios que le abra el gestor de correos usa mailto, de lo contrario usa el plugin.

6
  • he intentado pero solo me sale el error de mi else. ademas agregue la etiqueta a con su ejemplo de mail to y no hace nada.
    – Dimoreno
    el 21 jul. 2016 a las 18:58
  • me sale en consola este error cordova is not defined y me di cuenta que este error se da por este método $cordovaEmailComposer.open
    – Dimoreno
    el 21 jul. 2016 a las 19:23
  • he seguido el tutorial de la pagina oficial de ngCordova ngcordova.com/docs/plugins/emailComposer pero ejecuto y no se abre ningun gestor de correo en mi smartphone
    – Dimoreno
    el 21 jul. 2016 a las 21:36
  • @DiegoIsraelMoreno Si te sale el error de cordova is not defined es porque estarás probando tu código en un navegador y en este caso cordova no se incluye. Debes probar esa funcionalidad en un móvil.
    – devconcept
    el 28 jul. 2016 a las 13:33
  • @DiegoIsraelMoreno probaste la solución en un móvil?
    – fredyfx
    el 15 sep. 2016 a las 0:53

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.