如何增强 ngSanitize 白名单？答案

【问题标题】：How to enhance ngSanitize whitelists?如何增强 ngSanitize 白名单？
【发布时间】：2016-12-21 19:51:18
【问题描述】：

我正在尝试将 HTML 内容从控制器附加到视图。为此，我知道我们必须使用ngSanitize。一切正常，但它正在剥离 HTML 元素的属性。

这是我的控制器：

var modalVar = '<div class="modal fade" id="deleteModal'+ data.data.id +'" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title">Alert</h4></div><div class="modal-body"><p>Are you sure to delete?</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-danger" ng-click="deleteFunc('+ data.data.id +')" data-dismiss="modal">Yes</button></div></div></div></div>';

$scope.modalsDiv = $scope.modalsDiv + modalVar;

观点：

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

如果我检查并查看渲染的元素，每个 div 元素都会被渲染，但它们的属性会被剥离。

【问题讨论】：

文档中有解释.... RTFM
@charlietfl 所以你的意思是没有办法扩展 ngSanitize
如果您阅读手册，则不必扩展它。你需要的方法在那里

标签： angularjs html

【解决方案1】：

控制器不应该将 HTML 添加到视图中。

<!--REPLACE ng-html-bind 
  <div ng-bind-html="modalsDiv"></div>
-->
<!--WITH ng-if -->
  <div ng-if="showModal">
    <div class="modal fade" id="deleteModal{{data.data.id}} +'" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              &times;
            </button>
            <h4 class="modal-title">
              Alert
            </h4>
          </div>
          <div class="modal-body">
            <p>Are you sure to delete?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>
            <button type="button" 
                    class="btn btn-danger" 
                    ng-click="deleteFunc(data.data.id)" 
                    data-dismiss="modal">
               Yes
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

   //$scope.modalsDiv = modalVar;

   $scope.showModal = true;

不要在控制器中编写 HTML，而是使用 ng-if 指令。代码将更具可读性。

【讨论】：

【解决方案2】：

在你的控制器中试试这个： someVar = $sce.trustAsHtml('someVar'); 不要忘记将 $sce 注入 ctrl

【讨论】：