填充电子邮件数据的角度范围

时间:2016-08-11 00:14:06

标签: javascript html angularjs html5 email

所以我在我的表单中有一个函数,并使用电子邮件工作的角度,但是在填充电子邮件正文时遇到问题。此外,有没有办法强制电子邮件的“发件人”部分,即使它是从用户自己的客户端通过电子邮件发送的?

我的代码如下所示:

控制器:

(function() {
  'use strict';
  angular
    .module('mbapp')
    .controller('StepsController', StepsController, ['$scope']);

  /** @ngInject */
  function StepsController($scope, $timeout, webDevTec, toastr) {
    var vm = this;

    vm.awesomeThings = [];
    vm.classAnimation = '';
    vm.creationDate = 1467136913872;
    vm.showToastr = showToastr;

    activate();

    function activate() {
      getWebDevTec();
      $timeout(function() {
        vm.classAnimation = 'rubberBand';
      }, 4000);
    }

    $scope.Subject = "Moneyball Problem Phase Worksheet"
    $scope.bodyText = {
        hypCriteria: ""
    };

    $scope.mailLink = "mailto:" + $scope.emailId + "?subject=" + $scope.Subject + '&body=' + $scope.bodyText;


    function showToastr() {
      toastr.info('Fork <a href="https://github.com/Swiip/generator-gulp-angular" target="_blank"><b>generator-gulp-angular</b></a>');
      vm.classAnimation = '';
    }

    function getWebDevTec() {
      vm.awesomeThings = webDevTec.getTec();

      angular.forEach(vm.awesomeThings, function(awesomeThing) {
        awesomeThing.rank = Math.random();
      });
    }
  }
})();

我的观点(html):

<div class="container-fluid" style="font-family: Segoe UI; padding: 0;">
    <div style="background-color: #0070c0; min-height:100px;">
        <h1 style="color: #ffffff; font-size: 24px; padding-left:20px; padding-top: 30px;">Problem Phase Worksheet:</h1>
    </div>
    <form class="form-horizontal" role="form" style="padding-left: 20px; padding-top: 20px;">
        <div class="col-md-6">
            <div class="form-group">
                <span style="color: #0070c0; font-size: 18px;">Inputs</span>
            </div>          
            <div class="form-group">
                <label class="control-label" for="criteria" style="font-size: 14px;">Criteria:  <a href="#criteriaModal" data-toggle="modal"><span style="color: #afabab;" class="glyphicon glyphicon-question-sign"></span></a></label>
                <input type="text" class="form-control" id="criteria" ng-model="criteria" style="font-size: 14px;" placeholder="(e.g. more than 80%)">
            </div>              
            <div class="form-group">
                <label class="control-label" for="customer" style="font-size: 14px;">Customer:  <a href="#criteriaModal" data-toggle="modal"><span style="color: #afabab;" class="glyphicon glyphicon-question-sign"></span></a></label>
                <input type="text" class="form-control" id="customer" ng-model="customer" style="font-size: 14px;" placeholder="(e.g. enterprise system admins)">
                <!-- <p style="font-size: 12px;">(e.g. Infrastructure admins, network engineer, etc..)</p>   -->      
            </div>
            <div class="form-group">
                <label class="control-label" for="task" style="font-size: 14px;">Job to be Done:  <a href="#criteriaModal" data-toggle="modal"><span style="color: #afabab;" class="glyphicon glyphicon-question-sign"></span></a></label>
                <input type="text" class="form-control" id="task" ng-model="task" style="font-size: 14px;" placeholder="(e.g. keeping servers up to date)">
            </div>
            <div class="form-group">
                <label class="control-label" for="problem" style="font-size: 14px;">Problem:  <a href="#criteriaModal" data-toggle="modal"><span style="color: #afabab;" class="glyphicon glyphicon-question-sign"></span></a></label>          
                <input type="text" class="form-control" id="problem" ng-model="problem" style="font-size: 14px;" placeholder="(e.g. it takes to long (24+ hours) )">
            </div>  
        </div>  
        <!-- criteriaModal -->
        <div class="modal fade" id="criteriaModal" tabindex="-1" role="dialog" aria-labelledby="criteriaModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat odio vel fermentum faucibus. Phasellus vestibulum, justo sed vestibulum bibendum, risus mauris congue nisi, et iaculis ipsum nisl a turpis. Vivamus et purus diam. Proin sagittis nisl eu porttitor posuere. Phasellus feugiat nec elit et hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit a quam eget malesuada. Cras lobortis augue nibh, a feugiat justo consequat ac. In sit amet pulvinar massa. In maximus, justo eget elementum laoreet, lacus nunc molestie lectus, at congue neque nisl quis est. Nam non laoreet mauris. Phasellus non ullamcorper libero. Duis dapibus ornare arcu in fringilla. Curabitur molestie ex eu nunc ultricies, id pharetra nisl semper.</p>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="naviaBtn naviaBlue" data-dismiss="modal" value="okay">
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->        
        <div class="col-md-6">   
            <div> 
                <span style="color: #0070c0; font-size: 18px;">Examples</span>
                <a ng-href="{{mailLink}}" target="_self" class="btn btn-primary" style="float: right; font-size: 18px;">
                    <span class="glyphicon glyphicon-envelope"></span>  Email
                </a>
            </div>              
            <div style="background-color: #ffffff; padding: 15px; margin-top: 20px; border: 1px solid #ccc;">       
                <div>
                    <p style="font-size: 12px; color: #afabab;">HYPOTHESIS:</p>
                    <p style="font-size: 14px;" id="hypCriteria">We believe that <span>{{ criteria || '[criteria]' }}</span> of <span>{{ (customer != null) ? customer : '[customer]' }}</span> are most frustrated about <span>{{ (task != null) ? task : '[task]' }}</span> because <span>{{ problem || '[problem]' }}</span>.</p>
                </div>
                <div>
                    <p style="font-size: 12px; color: #afabab;">CUSTOMER SCREENING CRITERIA:</p>
                    <p style="font-size: 14px;">We are looking for <span>{{ (customer != null) ? customer : '[customer]' }}</span> who are regularly involved in <span>{{ (task != null) ? task : '[task]' }}</span>.</p>
                </div> 
                <div>
                    <p style="font-size: 12px; color: #afabab;">SCREENER:</p>
                    <p style="font-size: 14px;">How often do you <span>{{ (task != null) ? task : '[task]' }}</span> in your daily job?</p>
                </div>    
                <div>
                    <p style="font-size: 12px; color: #afabab;">CUSTOMER INTERVIEW QUESTIONS:</p>
                    <p style="font-size: 14px;">Tell me about the last time when you were <span>{{ (task != null) ? task : '[task]' }}</span>?</p>
                    <p style="font-size: 14px;">What are the major challenges with <span>{{ (task != null) ? task : '[task]' }}</span>?</p>
                    <p style="font-size: 14px;">On a scale of 0-10, how frustrating are these problems? Why?</p>            
                    <p style="font-size: 14px;">If you could wave a magic wand and be able to do anything about <span>{{ (task != null) ? task : '[task]' }}</span> in your daily job, what would it be?</p>
                </div>  
            </div>          
        </div>                         
    </form>
</div>

几乎忘了,我只是试图通过电子邮件发送这个div中的数据(这个div有从页面其他部分填写的表单中注入的静态文本和文本):

<div class="col-md-6">   
    <div> 
        <span style="color: #0070c0; font-size: 18px;">Examples</span>
        <a ng-href="{{mailLink}}" target="_self" class="btn btn-primary" style="float: right; font-size: 18px;">
            <span class="glyphicon glyphicon-envelope"></span>  Email
        </a>
    </div>              
    <div style="background-color: #ffffff; padding: 15px; margin-top: 20px; border: 1px solid #ccc;">       
        <div>
            <p style="font-size: 12px; color: #afabab;">HYPOTHESIS:</p>
            <p style="font-size: 14px;" id="hypCriteria">We believe that <span>{{ criteria || '[criteria]' }}</span> of <span>{{ (customer != null) ? customer : '[customer]' }}</span> are most frustrated about <span>{{ (task != null) ? task : '[task]' }}</span> because <span>{{ problem || '[problem]' }}</span>.</p>
        </div>
        <div>
            <p style="font-size: 12px; color: #afabab;">CUSTOMER SCREENING CRITERIA:</p>
            <p style="font-size: 14px;">We are looking for <span>{{ (customer != null) ? customer : '[customer]' }}</span> who are regularly involved in <span>{{ (task != null) ? task : '[task]' }}</span>.</p>
        </div> 
        <div>
            <p style="font-size: 12px; color: #afabab;">SCREENER:</p>
            <p style="font-size: 14px;">How often do you <span>{{ (task != null) ? task : '[task]' }}</span> in your daily job?</p>
        </div>    
        <div>
            <p style="font-size: 12px; color: #afabab;">CUSTOMER INTERVIEW QUESTIONS:</p>
            <p style="font-size: 14px;">Tell me about the last time when you were <span>{{ (task != null) ? task : '[task]' }}</span>?</p>
            <p style="font-size: 14px;">What are the major challenges with <span>{{ (task != null) ? task : '[task]' }}</span>?</p>
            <p style="font-size: 14px;">On a scale of 0-10, how frustrating are these problems? Why?</p>            
            <p style="font-size: 14px;">If you could wave a magic wand and be able to do anything about <span>{{ (task != null) ? task : '[task]' }}</span> in your daily job, what would it be?</p>
        </div>  
    </div>          
</div> 

1 个答案:

答案 0 :(得分:0)

这是不可能的。您无法处理电子邮件客户端中的任何内容你所能做的只是传递你已经做过的主语,身体,抄送,密送。