Send email with ionic framework

Question

Send email with ionic framework

Navigation

#1 by (2 votes)

4

I am trying to send an e-mail when I click on a button. I have followed a tutorial but what I have done does not work.

This is my code:

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>

Also, I would like to add the following:

The version of my ionic is 1.7.14
In the tutorial where I saw the plugin, it refers to this git repository: first repository and the plugin that I installed with ionic plugin add cordova-plugin-email-composer refers to this one: second repository

Why does not my code work? and why are the plugins different?

If the error is the plugins, how can I fix my code?

angularjs cordova ionic

asked by Dimoreno 21.07.2016 в 08:32

source

1 answer

Capture incoming call. Android How to iterate in a dataframe for a certain number of rows?

score 2 · Answer 1

First of all I have to tell you that in Cordova you can open the default email program using a link mailto: with This url scheme can even specify content for the body of the message

Click on the link below to see how it works.

Use ctrl + click if it does not open when you click on it or use the Chrome browser.

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

If you want to open it directly without showing it, you can create a link without inserting it in the html and simulating a click on it. Try the following code on a page.

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();

However, if you want to use the plugin because the functionality of mailto: is not enough, I recommend using the second repository The reasons are these:

If you are using ionic you should use ng-cordova
If you use ng-cordova you should use the recommended by them
Each recommended plugin has a reference to the original repository. You can find this in the documentation that tells you which one to use.

cordova plugin add https://github.com/katzer/cordova-plugin-email-composer.git
If you do not use a recommended plugin you should consider making a wrapper to the plugin to work with the angular promises if it exposes an api based on callbacks. This is often the only thing that ng-cordova does, depending on the plugin.

Following that logic, you should not have problems. Remember that the plugins are open-source so anyone can write one.

In your particular case you are using a showEmailComposerWithCallback method that belongs to the first plugin so it will not be available in the second. Different plugins expose different APIs.

Solution

Install the recommended plugin

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

Install ng-cordova if you have not already done so

bower install ngCordova

Use the api from ng-cordova (It's just a plugin wrapper and exposes the injectable $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';
        }
    }
});

As an additional note if you check the source code of the recommended plugin you will see that what this does is try to open a link with the url mailto: scheme internally but also bring additional functionalities such as checking if sending emails is possible.

If what you want to do is just put a link in the app to the users that you open the email manager use mailto , otherwise use the plugin.