Wie kann man ngSanitize Whitelists verbessern?

Question

Ich versuche, HTML-Inhalt von der Steuerung an die Ansicht anzufügen. Dafür weiß ich, dass wir ngSanitize verwenden müssen. Alles funktioniert gut, aber es streicht die Attribute der HTML-Elemente.

Hier ist mein Controller:

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; 

Aussicht:

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

Wenn ich die gerenderten Elemente zu prüfen und sehen, wird jedes div-Element gerendert, sondern ihre Attribute werden entfernt.

Answer 1

Controller sollten der Ansicht kein HTML hinzufügen.

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

Statt HTML in der Steuerung des Komponierens, verwenden Sie die ng-if Richtlinie. Der Code wird viel besser lesbar sein.

Answer 2

versuchen Sie dies in Ihrem Controller: someVar = $ sce.trustAsHtml ('someVar'); vergessen Sie nicht, $ sce in ctrl