通过角度显示html

-1

我试图显示已编码的html。但这似乎并不奏效。输入是通过：通过角度显示html

&lt;h1&gt;Some header&lt;/h1&gt;

它表明：

但我想它呈现HTML;但如下面的笔所示;它只是显示HTML源

这是我目前的控制器：

var myApp = angular.module('myApp', ['ngSanitize']); 

myApp.controller('myCtrl', function ($scope, $sce) { 
    $scope.trustedHtml = $sce.trustAsHtml('&lt;h1&gt;Some header&lt;/h1&gt;'); 
});

与下面的HTML：

<div ng-app="myApp" ng-controller="myCtrl"> 
    <div ng-bind-html="trustedHtml"></div> 
</div>

http://codepen.io/cskiwi/pen/PqXdOa

来源

2015-08-03 Kiwi

然后解码html并将其设置为绑定属性...问题是什么？ – Engineer

@Engineer然后我的问题是如何解码它 – Kiwi

你可以请帖子代码以及codepen链接 - 不是每个人都有时间去浏览网页，你会得到更多的回复我相信 –

要解码HTML，您可以使用这一招：

var encodedHtml = '&lt;h1&gt;Some header&lt;/h1&gt;'; 
var decodedHtml = angular.element('<div>').html(encodedHtml).text();

然后应用到你的财产：

$scope.trustedHtml = $sce.trustAsHtml(decodedHtml);

来源

2015-08-03 11:25:35 Engineer

我发现了一些类似的东西，但并不奇怪你需要创建一个div才能显示html？ – Kiwi

@Kiwi不，它不是。否则，你需要使用'String.replace'方法。并采取所有特殊符号，如'&'，'<'等。 – Engineer

诚然，但这似乎很好。谢谢！ – Kiwi

-1

入住这codepen请 http://codepen.io/anon/pen/xGmaWR

Angular Docs

来源

2015-08-03 11:21:57 JcDenton86

不回答我的问题，它只是说这里是一个不同的输入的工作示例.... – Kiwi

您的问题说“通过角度显示html”，我的答案确实如此。在你的身体中，你说“我想呈现html” – JcDenton86

这确实是我的标题，然后在问题本身中，我解释了我的输入是什么以及我想要它应该是什么。所以我的标题说明了问题所在...... – Kiwi

你将不得不净化你的HTML数据/串：

我有同样的问题之前，一些吨IME，然后，我创建了这个问题的过滤器，您可以使用此过滤器来净化做你的html代码：

app.filter("sanitize", ['$sce', function($sce) { 
    return function(htmlCode) { 
     return $sce.trustAsHtml(htmlCode); 
    } 
}]);

在HTML中你可以使用这样的：

<div ng-bind-html="businesses.oldTimings | sanitize"></div>

businesses.oldTimings为$范围变量具有字符串描述或具有带html标签的字符串，$ scope.businesses.oldTimings是您用于该html的特定控制器的一部分。

看到快照：

可以使用limitHtml过滤器做相同的：

app.filter('limitHtml', function() { 
    return function(text, limit) { 
     var changedString = String(text).replace(/<[^>]+>/gm, ' '); 
     var length = changedString.length; 
     return changedString.length > limit ? changedString.substr(0, limit - 1) : changedString; 
    } 
});

然后你就可以在你的HTML一样，添加博特过滤器：

<p class="first-free-para" ng-bind-html="special.description| limitHtml : special.description.length | sanitize">

希望它能为你工作。

来源

2017-01-23 12:30:59

通过角度显示html

回答

相关问题