角度を使ってdivの内容を電子メールで送信しよう

Question

私はクラス名を持つdivを持っており、そのdivのレンダリングされたコンポーネントを電子メールの本文にテキストとして挿入する方法を見つけようとしています。私の電子メールのためのすべてのものが動作し、私はクラス、NGモデルなどを使って試しました...これを行うには。まだ何も働いていません。

電子メールを処理するコントローラの私の一部：私はしたい再び

<div class="problemExp" style="background-color: #ffffff; padding: 15px; margin-top: 20px; border: 1px solid #ccc;" ng-model="problemExp">  
     <div> 
      <p style="font-size: 12px; color: #afabab;">HYPOTHESIS:</p> 
      <p style="font-size: 14px;" id="hypCriteria">We believe that <span style="color: blue;">{{ criteria || '[criteria]' }}</span> of <span style="color: blue;">{{ (customer != null) ? customer : '[customer]' }}</span> are most frustrated about <span style="color: blue;">{{ (task != null) ? task : '[task]' }}</span> because <span style="color: blue;">{{ problem || '[problem]' }}</span>.</p> 
     </div> 
     <div> 
      <p style="font-size: 12px; color: #afabab; margin-top: 25px;">CUSTOMER SCREENING CRITERIA:</p> 
      <p style="font-size: 14px;">We are looking for <span style="color: blue;">{{ (customer != null) ? customer : '[customer]' }}</span> who are regularly involved in <span style="color: blue;">{{ (task != null) ? task : '[task]' }}</span>.</p> 
     </div> 
     <div> 
      <p style="font-size: 12px; color: #afabab; margin-top: 25px;">CUSTOMER INTERVIEW QUESTIONS:</p> 
      <p style="font-size: 14px;">Tell me about the last time when you were <span style="color: blue;">{{ (task != null) ? task : '[task]' }}</span>?</p> 
      <p style="font-size: 14px;">What are the major challenges with <span style="color: blue;">{{ (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 style="color: blue;">{{ (task != null) ? task : '[task]' }}</span> in your daily job, what would it be?</p> 
     </div> 
    </div> 

、：含まれるように、一度にレンダリングクラスとNG-モデルと

$scope.Subject = "Moneyball Problem Phase Worksheet" 
$scope.bodyText = '{{ problemExp }}'; 

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

とのdiv、 HTML要素ではなくテキストです。

どうすればいいですか？

Answer 1

あなたはjQueryのtext()コマンドを使用することができます。

$scope.bodyText = angular.element('.problemExp').text(); 

これは、次のような出力を生成します：あなたは、テキストコンテンツのHTMLを処理して出力する方法をより詳細に制御する必要がある場合

// HYPOTHESIS: 
// We believe that {{ criteria || '[criteria]' }} of {{ (customer != null) ? customer : '[customer]' }} are most frustrated about {{ (task != null) ? task : '[task]' }} because {{ problem || '[problem]' }}. 


// CUSTOMER SCREENING CRITERIA: 
// We are looking for {{ (customer != null) ? customer : '[customer]' }} who are regularly involved in {{ (task != null) ? task : '[task]' }}. 


// CUSTOMER INTERVIEW QUESTIONS: 
// Tell me about the last time when you were {{ (task != null) ? task : '[task]' }}? 
// What are the major challenges with {{ (task != null) ? task : '[task]' }}? 
// On a scale of 0-10, how frustrating are these problems? Why?    
// If you could wave a magic wand and be able to do anything about {{ (task != null) ? task : '[task]' }} in your daily job, what would it be? 

を、あなたはjQueryのcontents()関数を使用して、各pノードの内容を取得できます。

var out = ""; 
var paragraph = $(".problemExp").contents(); 
for (var i = 0; i < y.length; i++) { 
    if (paragraph[i].nodeType != 3) out = out + paragraph[i].textContent + "\n"; 
} 
console.log(out); 

このコードは次のような出力になります。詳細について

// HYPOTHESIS: 
// We believe that {{ criteria || '[criteria]' }} of {{ (customer != null) ? customer : '[customer]' }} are most frustrated about {{ (task != null) ? task : '[task]' }} because {{ problem || '[problem]' }}. 

// CUSTOMER SCREENING CRITERIA: 
// We are looking for {{ (customer != null) ? customer : '[customer]' }} who are regularly involved in {{ (task != null) ? task : '[task]' }}. 

// CUSTOMER INTERVIEW QUESTIONS: 
// Tell me about the last time when you were {{ (task != null) ? task : '[task]' }}? 
// What are the major challenges with {{ (task != null) ? task : '[task]' }}? 
// On a scale of 0-10, how frustrating are these problems? Why?    
// If you could wave a magic wand and be able to do anything about {{ (task != null) ? task : '[task]' }} in your daily job, what would it be?