在 child 个组件中访问 ngSanitize

Question

我正在尝试在 child 组件中使用 ng-bind-html，但它不起作用。根据我的阅读，您需要包括 ngSanitize。我在 am parent 组件上有它并且在那里工作正常但无法让它在 child 上工作。有任何想法吗？如果您需要更多信息，请告诉我。提前致谢！

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

    }

}

在我的 html 我正在使用

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

Answer 1

如果你使用 ng-bind-html="Here"，那么 "Here" 应该在你的 scope/context 的某处定义 - 它应该是一个字符串，angular 将尝试解析为 html

在控制器中定义。

在 child 个组件中访问 ngSanitize

Access to ngSanitize in child components

angularjs

ngsanitize