send email with mandrill from angular ionic app

Question

Cannot send email using the mandrill api. I have added the controller to my markup, but when the send button is clicked nothing happens. I am following an example from the ionic forums and believe I am missing something. So to be specific about what i need is: I would like to know how to send an email from my ionic app prefilled with submitted form data. obviously for testing I have not added ng-model to store the submitted data. Below is my code, please take a look. thanks

shop.html view code

<ion-view view-title="Shop" ng-controller="OrderFormController">
  <ion-content>

    <div class="card">
        <ion-item ng-repeat="service in services">
            {{service.name}}
                <button class="button button-outline button-small button-stable" ng-click="toggleActive(service)" ng-class="{active:service.active}">
                    {{service.price | currency}}
                </button>
        </ion-item>
    </div>

    <div class="card">
        <ion-item ng-repeat="service in services | filter:true">
            {{service.name}}<br>{{service.price | currency}}
        </ion-item>

        <ion-item>
            Total: {{total() | currency}}
            <button href="#" class="button button-outline button-small button-stable">
                    Checkout
            </button>
        </ion-item>
    </div>

    <form novalidate> 
        <div class="list list-inset">
            <label class="item item-input">
                <input type="text" placeholder="email" name="email" ng-model="email">
            </label>
            <label class="item item-input">
                <input type="text" placeholder="phone" name="phone" ng-model="phone">
            </label>-->
            <label class="item item-input">
                <input type="text" placeholder="address" name="address" ng-model="address">
            </label>
        </div>
    </form>

    <button class="button button-full button-stable" ng-controller="sentMailCntrl" ng-click="sendMail({
        toEmail: 'email@gmail.com',
        subject: 'New Order',
        mailBody: {{totalItems()}}
        })">
        Send Order
    </button>

  </ion-content>
</ion-view>

OrderFormController

  myApp.controller('OrderFormController', function($scope) {

$scope.services = [
    {
        name: 'Espresso',
        price: 27,
        active:false
    },{
        name: 'Americano',
        price: 36,
        active:false
    },{
        name: 'Macchiato',
        price: 57,
        active:false
    },{
        name: 'Cappuccino',
        price: 42,
        active:false
    },{
        name: 'Mocha',
        price: 55,
        active:false
    },{
        name: 'Latte',
        price: 39,
        active:false
    },{
        name: 'Chai Latte',
        price: 50,
        active:false
    }
];

$scope.toggleActive = function(s){
    s.active = !s.active;
};

$scope.total = function(){

    var total = 0;

    angular.forEach($scope.services, function(s){
        if (s.active){
            total+= s.price;
        }
    });

    return total;
};

$scope.totalItems = function(){

    var totalItems = "";

    angular.forEach($scope.services, function(s){
        if (s.active){
            totalItems+= s.name+" $"+s.price+".00 ";
        }
    });

    return totalItems;
  };
});

sentMailCntrl

var myApp = angular.module('ionicApp', ['ionic']);

myApp.controller('sentMailCntrl',function($scope, $http){
  $scope.sendMail = function(a){
    console.log(a.toEmail);
    var mailJSON ={
        "key": " ",
        "message": {
          "html": ""+a.mailBody,
          "text": ""+a.mailBody,
          "subject": ""+a.subject,
          "from_email": "noreply@fooddelivery.com",
          "from_name": "New Order",
          "to": [
            {
              "email": ""+a.toEmail,
              "name": "New Order",
              "type": "to"
            }
          ],
          "important": false,
          "track_opens": null,
          "track_clicks": null,
          "auto_text": null,
          "auto_html": null,
          "inline_css": null,
          "url_strip_qs": null,
          "preserve_recipients": null,
          "view_content_link": null,
          "tracking_domain": null,
          "signing_domain": null,
          "return_path_domain": null
        },
        "async": false,
        "ip_pool": "Main Pool"
    };
    var apiURL = "https://mandrillapp.com/api/1.0/messages/send.json";
    $http.post(apiURL, mailJSON).
      success(function(data, status, headers, config) {
        alert('successful email send.');
        $scope.form={};
        console.log('successful email send.');
        console.log('status: ' + status);
        console.log('data: ' + data);
        console.log('headers: ' + headers);
        console.log('config: ' + config);
      }).error(function(data, status, headers, config) {
        console.log('error sending email.');
        console.log('status: ' + status);
      });
  }
})

here is the console log when send email button is clicked

TypeError: Cannot read property 'toEmail' of undefined
at l.$scope.sendMail (app.js:6)
at ib.functionCall (ionic.bundle.min.js:229)
at ionic.bundle.min.js:386
at l.$get.l.$eval (ionic.bundle.min.js:156)
at l.$get.l.$apply (ionic.bundle.min.js:157)
at HTMLButtonElement.<anonymous> (ionic.bundle.min.js:386)
at HTMLButtonElement.c (ionic.bundle.min.js:63)
at n (ionic.bundle.min.js:22)
at t (ionic.bundle.min.js:22)
at HTMLDocument.r (ionic.bundle.min.js:22)

Answer 1

You are not providing a parameter to your sendMail function.

The sendMail function requires you send an object looking like this:

{
  toEmail: 'emailaddress',
  subject: 'subject',
  mailBody: 'body of the email'
}

In your HTML make your call like this:

 <button class="button button-outline button-stable" ng-click="sendMail({
      toEmail: 'emailaddress',
      subject: 'subject',
      mailBody: 'body of the email'
    })">

Set the toEmail property to a valid email address. If that works, then you can build out your app to use the email address that is entered in a form or however you plan on getting the email address. You will need to set the subject and mailBody properties appropriately also.