Question

我正在尝试调用作为ng-repeat一部分的<td>元素内的函数。任何想法如何让这个工作？我尝试了很多东西而没有快乐。问题是cartperf.perf_desc绑定。

<table class="table table-striped table-condensed" >
  <tr ng-repeat="cartperf in $ctrl.cartSummary">
    <td class="cs-cart-sum-td">{{cartperf.id}}</td>
    <td class="cs-cart-sum-td" ng-bind="$ctrl.myNewHtml(cartperf.perf_desc)"></td>
    <td class="cs-cart-sum-td">{{cartperf.perf_dt}}</td>
    <td class="cs-cart-sum-td">{{cartperf.theater}}</td>
    <td class="cs-cart-sum-td">{{cartperf.num_tkts}}</td>
    <td class="cs-cart-sum-td">{{cartperf.due_amt}}</td>
    <td class="cs-cart-sum-td">
      <button type="button" data-perf='cartperf' class="btn btn-link cs-btn-delete" ng-click="$ctrl.confirmDelete(cartperf)">{{cartperf.RemoveBtnTxt}}</button>
    </td>
  </tr>
</table>

驱动模板的控制器

function cartSummaryController() {

    this.$onInit = function () {


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

    }; //End $onInit
}

主控制器

function subAppController($sce) {

    this.$onInit = function () {

        //Get content from Parent
        this.globalContent = this.getGlobalContent;


    }; //End $onInit

    this.continueClick = function () {
        console.log("Continue Selected");
    };


    this.currentStep = 1;



    this.contentJson = pcContent;
    this.globalContentJson = pcGlobalContent;
    this.cartPerfs = pcCartPerfs


    //Called from the template to get global content.
    this.getGlobalContent = function (module, item) {
        var globalContent = new contentProvider(this.globalContentJson);
        var result = globalContent.get(module, item);
        return result;
    }



    this.myNewHtml = function (item) {
        var result = $sce.trustAsHtml(item);
        return result;
    }

    //Get the current count of valid performance in the cart
    // We use this to determine if we hide/disable the continue buttons.
    this.min_perfs = this.contentJson.required_min_perfs;
    this.curr_perf_count = this.cartPerfs.length;
    this.continueActive = this.curr_perf_count >= this.min_perfs;

}

主要模板

<div class="container-fluid">

    <!--Top (Bread crumbs and Cart Summary)-->
    <div class="cs-app-top row">
        <div class="cs-app-left col-sm-3">
            <div class="pull-left">
                <div class="bcrumbs">Step 1 > Step2</div>
                <div>
                    <label class="cs-page-title">{{$ctrl.contentJson.page_title}}</label>
                </div>
            </div>

        </div>
        <div class="cs-app-right pull-right col-sm-9">
            <cart-summary content-json="$ctrl.contentJson"
                          get-global-content="$ctrl.getGlobalContent(module,item)"
                          cart-perfs="$ctrl.cartPerfs"
                          my-new-html="$ctrl.myNewHtml(item)">
            </cart-summary>
            <div class="cs-continue-btn-div pull-right">
                <button class="cs-continue-btn cs-btn"
                        ng-bind="$ctrl.globalContent('subpackage','continueBtnText')"
                        ng-class="{'hidden': !$ctrl.continueActive}"
                        ng-disabled="!$ctrl.continueActive"
                        ng-click="$ctrl.continueClick()" ></button>
            </div>
        </div>
    </div>

    <!--Header Content-->
    <div class="cs-header row">
        <div ng-bind-html="$ctrl.myNewHtml($ctrl.contentJson.page_header)"></div>
    </div>

    <!--Main Section (perf-list)-->
    <div class="cs-app-main row">
        <div>
            <perf-list ng-if="$ctrl.currentStep == 1"
                       content-json="$ctrl.contentJson"
                       get-global-content="$ctrl.getGlobalContent(module,item)">


            </perf-list>
        </div>
    </div>
    <!--Footer-->
    <div class="cs-app-footer row">
        <div class="cs-continue-btn-div pull-right">
            <button class="cs-continue-btn cs-btn"
                    ng-bind="$ctrl.globalContent('subpackage','continueBtnText')"
                    ng-disabled="!$ctrl.continueActive"
                    ng-click="$ctrl.continueClick()"></button>
        </div>
    </div>
</div>

- 模块

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: '&'

        },
    });


    app.component('perfList', {
        templateUrl: '../subpackages/templates/perf-list.templateV3.html',
        controller: PerfListController,
        bindings: {
            contentJson: '<',
            getGlobalContent: '&'
        },
    });

})(myApp);

Answer 1

您可以在Execute a function inside ng-repeat in AngularJS

中创建自定义指令

Answer 2

找到解决方案。而不是这样做

<td class="cs-cart-sum-td" ng-bind="$ctrl.myNewHtml(cartperf.perf_desc)"></td>

我做到了。

<td class="cs-cart-sum-td" ng-bind-html="$ctrl.myHtml({item: cartperf.perf_desc})"></td>

在td元素内调用函数来设置文本

2 个答案: