在AngularJS中顯示HTML

我有一個角碼需要插入html標籤，我發現我可以使用ngSanitize：https://docs.angularjs.org/api/ngSanitize，但我不會在該項目中加載另一個庫。在AngularJS中顯示HTML

我嘗試這樣做：AngularJS : Render HTML in $scope variable in view

，但我不能讓工作。

這是沒有加載另一個角度庫的任何方式嗎？

HTML：

<div ng-controller="MyCtrl"> 
    <ul class="procedures"> 
    <li ng-repeat="procedure in procedures"> 
     <h4><a href="#" ng-click="show = !show">{{procedure.icon}}</a></h4> 
     <div class="procedure-details" ng-show="show"> 
     <p>text here: {{procedure.text}}</p> 
     <p>your number is: {{procedure.number}}</p> 
     <p>price you will pay: {{procedure.price}}</p> 
     </div> 
    </li> 
    </ul> 
</div>

JS：

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

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
    $scope.procedures = [{ 
    icon: '<i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>', 
    text: 'test text', 
    number: 1, 
    price: 10000 
    }]; 


}

的jsfiddle：

http://jsfiddle.net/wD7gR/247/

來源

2016-06-27 Raduken

從版本開始10，角包含$sce service，可以用來標記HTML作爲「安全」

UPDATED JSFIDDLE

angular 
 
.module('myApp',[]) 
 
.controller('MyCtrl', function($scope, $sce) { 
 
    $scope.procedures = [ 
 
     { 
 
      icon: $sce.trustAsHtml('<i class="fa fa-american-sign-language-interpreting" aria-hidden="true">i am icon</i>'), 
 
      text: 'test text', 
 
      number: 1, 
 
      price: 10000 
 
     } 
 
    ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <ul class="procedures"> 
 
     <li ng-repeat="procedure in procedures"> 
 
      <h4><a href="#" ng-click="show = !show" ng-bind-html="procedure.icon"></a></h4> 
 
      <div class="procedure-details" ng-show="show"> 
 
       <p>text here: {{procedure.text}}</p> 
 
       <p>your number is: {{procedure.number}}</p> 
 
       <p>price you will pay: {{procedure.price}}</p> 
 
      </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-06-27 19:18:08

感謝這就是我想要的，但現在你的代碼被打破顯示DIV之前，我在點擊圖標。 – Raduken

@Raduken刪除了所有與主題無關的代碼。我敢肯定，你可以添加任何邏輯隱藏/顯示沒有麻煩;-) –

@Raduken，無論如何，我點擊更新與隱藏/隱藏的嵌入式代碼片段。 –

我可以告訴ü，ü可以像下面這應該是如下

$scope.html = "<i class='fa fa-american-sign-language-interpreting' aria-hidden='true'></i>";

和

<div ng-bind-html-unsafe="html"></div>

你可以對圖標，文本或任何你喜歡的做同樣的事情......我不確定如何做到這一點現在因爲我從手機輸入這個fone，我希望你能明白這個主意，如果不是，請留下評論，我會寫一個完整的功能，一旦我把我的手放在機器上。

來源

2016-06-27 19:18:35 Wcan

謝謝，但你能不能我應該如何將這個應用到我的真實代碼？我無法使工作:( – Raduken

而不是使用ngSanitize可以使用$sce AZ過濾器這樣的：

將這個代碼在app.js：

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

然後在HTML中使用這樣的：

<h4><a href="#" ng-click="show = !show" ng-bind-html="procedure.icon | sce"></a></h4>

來源

2016-06-27 19:19:58

非常感謝，但你可以讓我進入我的代碼嗎？將有可能嗎？謝謝。 – Raduken

@Raduken對不起，你的意思是什麼？ –

怎麼可以應用你說的這段代碼？http://jsfiddle.net/wD7gR/247/ – Raduken

您可以使用angular-sanitize在視圖中插入HTML。

Example is given in plnkr

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

來源

2017-11-30 09:30:02

在AngularJS中顯示HTML

回答

相關問題