在AngularJS中显示HTML

我有一个角度编码什么需要插入html标记，我发现我可以使用

ngSanitize

：，但我不需要在该项目中加载另一个库

我试过这个：

但是我不能工作

在没有加载另一个角度库的情况下，有没有办法做到这一点

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>

此处的文本：{procedure.text}

您的号码是：{{procedure.number}

您将支付的价格：{procedure.price}

js:

var myApp=angular.module（'myApp'，[]）；
//指令（'myDirective'，function（）{}）；
//工厂（'myService'，function（）{}）；
函数MyCtrl（$scope）{
$scope.procedures=[{
图标：“”，
文本：“测试文本”，
编号：1，
价格：10000
}];
}

jsfiddle:

<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>

---

从版本

1.2.0

开始，角度包含，可用于将html标记为“安全”

angular
.module（'myApp'，[]）
.controller（'MyCtrl'，函数（$scope，$sce）{
$scope.procedures=[
{
图标：$sce.trustAsHtml（‘我是图标’），
文本：“测试文本”，
编号：1，
价格：10000
}
];
});



此处的文本：{procedure.text}

您的号码是：{{procedure.number}

您将支付的价格：{procedure.price}



从版本
1.2.0
开始，角度包含，可用于将html标记为“安全”



angular
.module（'myApp'，[]）
.controller（'MyCtrl'，函数（$scope，$sce）{
$scope.procedures=[
{
图标：$sce.trustAsHtml（‘我是图标’），
文本：“测试文本”，
编号：1，
价格：10000
}
];
});



此处的文本：{procedure.text}

您的号码是：{{procedure.number}

您将支付的价格：{procedure.price}



我可以告诉你，你可以像下面这样做

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

$scope.html=”“；

及



你可以为图标、文本或任何你喜欢的东西做同样的事情。。。我现在不知道该怎么做，因为我是在mobile fone上输入的，我希望你能明白我的想法，如果没有，请留下评论，一旦我接触到这台机器，我会写一个完整的函数。
我可以告诉你，你可以像下面这样做，应该如下所示

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

$scope.html=”“；

及



你可以为图标、文本或任何你喜欢的东西做同样的事情。。。我现在不知道该怎么做，因为我是在mobile fone上输入的，我希望你会明白，如果不是的话，请留下评论，一旦我接触到这台机器，我会写一个完整的函数。
你可以使用
$sce
az过滤器，而不是使用ngSanitize，如下所示：

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

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

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

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

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

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


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


谢谢，这是我想要的，但是你的代码被破坏了，现在在我点击图标之前显示div。@Raduken a删除了所有与主题无关的代码。我相信，您将能够毫无困难地为隐藏/显示添加任何逻辑；-）@Raduken，无论如何，我用单击时显示/隐藏更新了嵌入的代码片段。@Raduken我很乐意提供帮助，谢谢这是我想要的，但您的代码已被破坏，请在我单击图标之前显示div。@Raduken a删除了所有与主题无关的代码。我相信，您将能够毫无困难地为隐藏/显示添加任何逻辑；-）@拉杜肯，无论如何，我用点击显示/隐藏更新了嵌入的代码片段。@拉杜肯我真的很高兴能帮上忙。非常感谢，但是你能把我插入我的代码吗？可能吗？谢谢。@Raduken对不起，我不明白你的意思。你怎么能把你说的话应用到这段代码中呢@Raduken等一下非常感谢但是你能把我输入我的代码吗？可能吗？谢谢。@Raduken对不起，我不明白你的意思。你怎么能把你说的话应用到这段代码中呢@Raduken等一下谢谢，但你能告诉我如何将其应用到我的真实代码中吗？我无法工作：（谢谢，但你能告诉我如何将其应用到我的真实代码中吗？我无法工作：(