Access to ngSanitize in child components

Question

I am trying to use ng-bind-html in a child component and it is not working. From what I read, You need to include ngSanitize. Which I have on am parent component and works fine there but can't get it to work on the child. Any ideas? Please let me know if you need more information. Thanks in advance!

var myApp = angular.module('subPackages', ['ngMaterial', 'ngMessages','ngSanitize']).config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
      // Allow same origin resource loads.
      'self',
      // Allow loading from our assets domain.  Notice the difference between * and **.
      '<<Protected Content>>**'
    ]);
});



(function (app) {
    'use strict';

    app.component('appComponent', {
        templateUrl: '../subpackages/templates/app-template.html',
        controller: subAppController
    });

    app.component('cartSummary', {
        templateUrl: '../subpackages/templates/cart-summary.template.html',
        controller: cartSummaryController,
        bindings: {
            contentJson: '<',
            cartPerfs: '<',
            getGlobalContent: '&',
            myNewHtml: '&',
            callExecLocalProd: '&'

        },
    });


})(myApp);

Parent

function subAppController($sce, $compile) {
...
}

Child

function cartSummaryController($sce, $compile) {

    this.$onInit = function () {


        //Get content from Parent
        this.globalContent = this.getGlobalContent;
        this.cartSummary = this.cartPerfs;
        this.myHtml = this.myNewHtml;
        this.localProd = this.callExecLocalProd;

        this.removePerf = function (obj) {
            console.log("removing performance");
            var liseqno = $("#mBtnRemove").data("liseqno");
            var perfno = $("#mBtnRemove").data("perfno");

            //Close modal
            $('#myModal').modal('toggle');

            var rpParam = [
                { elp_remove_li_seq_no: liseqno, elp_remove_perf_no: perfno }
            ]

            this.localProd({ item: rpParam });
        }

    }; //End $onInit

    this.confirmDelete = function (perf) {
        console.log("Confirm Delete");
        console.log(perf);



        //Replace the perf_desc token with perf description
        var msg = this.globalContent({ module: "subpackage", item: "modalMessage" });
        var finalDesc = msg.replace(/{perf_desc}/g, perf.perf_desc);

        //Set the body of the modal with our message
        //$('.modal-body ').text($sce.trustAsHtml(finalDesc));
        //$('.cs-modal-body').attr("ng-bind-html", $sce.trustAsHtml(finalDesc));
        $('.cs-modal-body').attr("ng-bind-html", finalDesc);


        //populate our data attributes that we will need later
        $('#mBtnRemove').data("liseqno", perf.li_seq_no)
        $('#mBtnRemove').data("perfno", perf.perf_no)
        $('#myModal').modal();

    }

}

In my html I am using

<p class="cs-modal-body" ng-bind-html="Here"></p> 

Answer 1

if you use ng-bind-html="Here", then "Here" should be defined somewhere in your scope/context - it should be a string, which angular will try to parse as html

Define it in the controller.