通過角度顯示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

回答

相關問題