从 angular ionic 应用程序使用山魈发送电子邮件

Question

无法使用 mandrill api 发送电子邮件。我已将控制器添加到我的标记中，但是单击发送按钮时没有任何反应。我正在关注离子论坛中的一个例子，并相信我遗漏了一些东西。所以要具体说明我需要的是：我想知道如何从我的 ionic 应用程序中发送一封电子邮件，其中预先填充了提交的表单数据。显然为了测试我没有添加 ng-model 来存储提交的数据。下面是我的代码，请看一下。谢谢

shop.html 查看代码

<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>

订单表单控制器

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

这是单击发送电子邮件按钮时的控制台日志

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

您没有为 sendMail 函数提供参数。

sendMail 函数要求您发送如下所示的对象：

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

在您的 HTML 中进行如下调用：

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

将 toEmail 属性设置为有效的电子邮件地址。如果可行，那么您可以构建您的应用程序以使用在表单中输入的电子邮件地址，或者您计划获取该电子邮件地址。您还需要适当地设置 subject 和 mailBody 属性。