在 AngularJS 中显示 HTML答案

【问题标题】：Display HTML in AngularJS在 AngularJS 中显示 HTML
【发布时间】：2016-06-27 19:01:59
【问题描述】：

我有一个角度编码需要插入 html 标签，我发现我可以使用 ngSanitize :https://docs.angularjs.org/api/ngSanitize ，但我不想在该项目中加载另一个库。

我试过这个：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/

【问题讨论】：

标签： angularjs

【解决方案1】：

从版本1.2.0开始，angular包含$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>

【讨论】：

谢谢，这是我想要的，但您的代码已损坏，现在在我点击图标之前显示 div。
@Raduken 删除了所有与主题无关的代码。我敢肯定，您将能够毫无困难地添加任何隐藏/显示逻辑；-)
@Raduken，无论如何，我更新了嵌入式代码 sn-p，点击时显示/隐藏。
@Raduken 很高兴能提供帮助

【解决方案2】：

您可以使用$sce az 过滤器而不是使用 ngSanitize，如下所示：

将此代码放在 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>

【讨论】：

非常感谢，但你可以让我进入我的代码吗？会有可能吗？谢谢。
@Raduken 抱歉，没明白你的意思？
如何将您所说的应用到此代码中？ jsfiddle.net/wD7gR/247
@Raduken 等一下

【解决方案3】：

我可以告诉你，你可以像下面那样做它应该如下

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

和

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

你可以对图标、文本或任何你喜欢的东西做同样的事情......我现在不知道该怎么做，因为我是从手机输入的，我希望你能明白，如果不要发表评论，一旦我拿到机器，我会写一个完整的功能。

【讨论】：

谢谢，但你能告诉我如何将它应用到我的真实代码中吗？我无法工作:(

【解决方案4】：

您可以使用 angular-sanitize 在视图中插入 HTML。

Example is given in plnkr

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

【讨论】：