2015-10-17 77 views
0

剛開始學習Angular JS。trustAsHtml內容不會正確編碼

現在我有兩個電子郵件和tweet分享按鈕。我使用標籤併爲按鈕樣式定義了css。用ng-bind-html,我想創建電子郵件和推文的共享鏈接。

現在,當鼠標懸停按鈕,文本顯示在瀏覽器的底部是正確的,但是當我點擊電子郵件按鈕,標題仍然是正確的,但主體內容是搞砸顯示: I%20scored %20a%200%20on%20is%20quiz。%20Try%20to%20beat%20my%20score%20at%20%23

與tweet url相同。

我想它一定是錯誤的編碼。但爲什麼郵件標題是正確的?

HTML:

<p>Use links below to challenge your friends.</p> 
<div class="share" ng-bind-html="createSharedLinks(percentage)"> 
</div> 

JS:

app.controller('QuizController', ['$scope','$http','$sce', function($scope, $http, $sce){ 
$scope.percentage = 0; 
    $scope.createSharedLinks = function(percentage){ 
     var url = 'abc.com'; 

     var emailLink = '<a class="btn email" href="mailto:?subject=Try to beat my quiz score!&amp;body=I scored a '+percentage+'% on this quiz. Try to beat my score at '+url+'">Email a Freind</a>'; 

     var twitterLink = '<a class="btn twitter" target="_blank" href="http://twitter.com/share?text=I scored a '+percentage+'% on this quiz. Try to beat my score at&amp;hashtags=SaturnQuiz">Tweet your score</a>'; 

     var newMarkup = emailLink + twitterLink; 

     return $sce.trustAsHtml(newMarkup); //inject new html 
    } 

} 
+1

建議您使用指令和模板代替 – charlietfl

+0

@charlietfl您能更具體嗎?我是Angular的新手。 – luochenhuan

+0

創建一個指令...是相當自我解釋。關於指令有很多教程 – charlietfl

回答

0

沒有什麼不對您的代碼。事實上,trustAsHtml按預期工作。但是當你點擊電子郵件鏈接時,url是對查詢字符串進行編碼的瀏覽器。

您可以使用開發人員工具查看實際內容。