Question

我正在尝试将控制器中的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元素，但会删除它们的属性。

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

JS

   //$scope.modalsDiv = modalVar;

   $scope.showModal = true;

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

Answer 2

在您的控制器中尝试此操作： someVar = $ sce.trustAsHtml（'someVar'）; 不要忘记将$ sce注入ctrl

如何增强ngSanitize白名单？

2 个答案: