插入 HTML 代码 AngularJS答案

【问题标题】：Insert HTML code AngularJS插入 HTML 代码 AngularJS
【发布时间】：2014-12-29 08:29:35
【问题描述】：

我正在尝试使用变量 $scope.text 插入此 html 代码：

<ul>
  <li>
    <div data-drop="true" ng-model='list1' 
         data-jqyoui-options="optionsList1" jqyoui-droppable="{multiple:true}">
      <div ng-repeat="item in list1" ng-show="item.title" 
           data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" 
           ng-model="list1" jqyoui-draggable=\"{index: {{$index}},animate:true}\">
           {{item.title}}</div>
    </div>
  </li>
</ul>

在 Angularjs 的 html 文件中我使用：<div ng-bind-html="text"></div>

问题是，在我的 Web Inspector 中只有：

<ul><li>
     <div >{{item.title}}</div>
</li></ul>

如何显示所有参数？

【问题讨论】：

控制台有异常吗？
Nop.. 和 $scope.text 有正确的 html 代码..
我认为这是默认 $sanitize 服务的工作方式。它只是从您的 HTML 中删除可能未保存的内容。查看详细信息和示例：docs.angularjs.org/api/ngSanitize/service/$sanitize
Insert HTML into view using AngularJS的可能重复

标签： html angularjs ng-bind-html

【解决方案1】：

解决方案是 $sanitize:

HTML 文件：

<div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>

控制器文件：

$scope.deliberatelyTrustDangerousSnippet = function() {
    return $sce.trustAsHtml($scope.texto);
};

安装消毒：

npm install angular-sanitize

【讨论】：

如果包含ngSanitize 模块，则控制器中也不需要$sce.trustAsHtml()。 ngSanitize 默认会这样做。