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"，那么“Here”应该在您的范围/上下文中的某个位置定义 - 它应该是一个字符串，其中angular将尝试解析为html

在控制器中定义它。

访问子组件中的ngSanitize

1 个答案: