Доступ к ngSanitize в дочерних компонентах

Question

Я пытаюсь использовать ng-bind-html в дочернем компоненте, и он не работает. Из того, что я прочитал, нужно включить ngSanitize. У меня есть родительский компонент, и он прекрасно работает там, но не может заставить его работать на ребенка. Есть идеи? Пожалуйста, дайте мне знать, если вам нужна дополнительная информация. Заранее спасибо!

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

родитель

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

ребенок

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();

    }

}

В моем HTML я использую

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

Answer 1

Если вы используете ng-bind-html="Here", тогда "Здесь" должно быть определено где-то в вашей области видимости / контексте - это должна быть строка, которую angular будет пытаться проанализировать как HTML

Определите это в контроллере.