是否可以在JS文件中触发ng-repeat？

Question

我有一个以表结构格式化的工具提示。该工具提示位于js文件中，如下所示：

JS文件：

        scope.options.chart.tooltip =  {    
                        contentGenerator: function (e) {
                            var series = e.series[0];
                            if (series.value === null) {return;}

                            var header =
                                "<thead>" +
                                "<tr>" +
                                "<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
                                "<td class='key'>" + series.key + " CCIRs:</td>" +
                                "</tr>" +
                                "</thead>";

                            var rows =
                                "<tr>" +
                                "<td class='key'><strong>" + <INSERT HERE> + "</strong></td>" +
                                "<td class='x-value'>" + e.data.MyAttribute1 + "</td>" +
                                "</tr>" 

                            return "<table>" +
                                header +
                                "<tbody>" +
                                rows +
                                "</tbody>" +
                                "</table>";
                        }
                    }

如果说“INSERT HERE”，我很难确定如何打印数组的每个值，以便工具提示每个索引项显示一个新行。

我尝试注射ng-repeat作为一种可行的解决方案：

var rows =
        "<tr ng-repeat='x in myArray'>" +
        "<td class='key'><strong>" + {{x.propName}} + "</strong></td>"

但是返回语法错误。

我尝试过的另一个解决方案是在工具提示中打印一个简单的'for'循环对象，但后来我很难搞清楚如何获取该数组并为每个表行动态打印每个项目：

var myArray = [];

for (var i = 0; i < ccirdata.length; i++) {
                if (ccirdata[i].catType === 'I') {      
                    myArray.push(ccirdata[i].propName);

                }
            }

我必须以某种方式弄清楚如何在这个JS文件中打印myArray的每个索引项，但我在这里遇到了麻烦！请帮忙！

编辑：这是整个指令：

(function() {
'use strict';
/* jshint quotmark: false */

angular
    .module('webApp')
    .directive('ccirSummary', ccirSummary);

ccirSummary.$inject = ['$window', 'Accessibility', 'Tools', 'ccirSummaryChartConfig', '$timeout'];
function ccirSummary($window, Accessibility, Tools, ccirSummaryChartConfig, $timeout)
{
    var directive = {
    restrict: 'E',
    scope: {
        vm: '='
    },
    link: ccirSummaryLink,
    templateUrl: 'scripts/tiles/ccirSummary/views/ccirSummary.html'
};
return directive;

function ccirSummaryLink(scope, element /*, attrs*/)
{
    $timeout(function() {     

     console.log(Object.keys(scope.vm)); 
     var ccirSummaryChartInfo = scope.vm;
     var ccirdata = ccirSummaryChartInfo.ccirdata;

    scope.options = ccirSummaryChartConfig.getChartConfig();  
    console.log(ccirdata);

    var myArray = [];


            for (var i = 0; i < ccirdata.length; i++) {
                if (ccirdata[i].catType === 'I') {      
                    myArray.push(ccirdata[i].propName);
                }
            }


    scope.options.chart.tooltip =  {    
                        contentGenerator: function (e) {
                            var series = e.series[0];
                            if (series.value === null) {return;}

                            var header =
                                "<thead>" +
                                "<tr>" +
                                "<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
                                "<td class='key'>" + series.key + " CCIRs:</td>" +
                                "</tr>" +
                                "</thead>";

                            var rows =
                                "<tr>" +
                                "<td class='key'><strong>" + INSERT HERE + "</strong></td>" +
                                "<td class='x-value'>" + e.data.MyAttribute1 + "</td>" +
                                "</tr>" 

                            return "<table>" +
                                header +
                                "<tbody>" +
                                rows +
                                "</tbody>" +
                                "</table>";
                        }
                    }

    scope.data = [
                {
                    key: 'Category I',
                    y: ccirSummaryChartInfo.ccirCategoryIncidentI,
                    MyAttribute1:'DLA Avn ... CAT I',

                },
                {
                    key: 'Category II',
                    y: ccirSummaryChartInfo.ccirCategoryIncidentII,
                    MyAttribute1:cat1CatNum,

                },
                {
                    key: 'Category III',
                    y: ccirSummaryChartInfo.ccirCategoryIncidentIII,
                    MyAttribute1:'DLA Avn ... CAT III',

                },
            ];          

    var lastUpdatedDateTime;
    var forceUpdate = false;
    scope.$watch('vm.ccirdata' , function (newValue)
    {

    });

    }, 500);

    var tooltip = Tools.buildTooltip ({
        base: element,
        tipText: getccirHintText
    });


        }    
    }
})();