Search code examples
javascripthtmlangularjshtml-sanitizing

ng-html-bind for label that contains checkbox

I have the following view.It's standard bootstrap for checkboxes,where input is located inside the label

<div class="checkbox">
    <label ng-bind-html="vm.trustedHtml">
        <input  type="checkbox" ng-model="vm.isAcknowledged">
    </label>
</div>

I need to bind my trustedHtml property,that contains html,on label.But this directive fully replace the content of the label,including the input.How can I avoid it?The only option I see is changing the html and moving the input out of label,but I don't like it.

Solution

  • No, ng-bind-html does not have anything like "place to insert". It's really straightforward.

    1. add nested <span> and put ng-bind-html on it
    2. include <input> into vm.trustedHtml
    3. Don't use ng-bind-html if you know all variations possible and there are not so many of them: just describe all options with appropriate ng-if