2015-10-17 3 views
0

только начать изучать Угловые JS.trustAsHtml-контент не кодируется правильно

Теперь у меня есть две кнопки для отправки электронной почты и щебета. Я использую тег и заданный css для стиля кнопки. С ng-bind-html, я хочу создать ссылки для обмена сообщениями и электронной почты.

Теперь при наведении наведения на кнопке, текст отображается в нижней части браузера правильно, но когда я нажимаю кнопку электронной почты, название все еще правильно, но содержание тела перепуталось показывает: I% 20scored % 20a% 200 %% 20on% 20is% 20quiz.% 20Try% 20to% 20beat% 20my% 20score% 20at% 20% 23

То же, что и URL-адрес tweet.

Я думаю, что это должно быть что-то неправильно с кодировкой. но почему название электронной почты является правильным?

HTML:

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

ЯШ:

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 кодирует строку запроса.

Вы можете использовать инструменты разработчика, чтобы просмотреть фактический контент.

Смежные вопросы