javascript - 带有 dataItem 数组和 Angular ng-click 的剑道树列表模板

Question

我目前正在使用 Kendo-UI 和 AngularJS。我试图让树列表根据它收到的 dateItem.[column_name] 数组将按钮呈现到列中。我无法生成其中包含绑定(bind) ng-click 指令的按钮。

目前我正在尝试执行以下操作:

1. 在 Angular Controller 中预定义列
2. 根据数组将自定义列推送到现有列中收到 VIA REST 服务。
3. 为每一列设置自定义模板
4. 根据包含 ng-click 指令的 dataItem.[custom_column] 数组在自定义模板中创建按钮。

我很难掌握语法和与 Angular 的绑定(bind)。对于自定义列中的每个数组项，最终结果应该有一个按钮，包含一个 ng-click。

我已经尝试过的:

            angular.forEach(array, function(value, key) {
                var buttonArray = "dataItem."+value["column_name"];
                columns.push({field: value["column_name"], template: "<span>#alert('"+buttonArray+"');#</span>"});                    
            });

这只是用文本“dataItem.firstColumn”而不是对象或其他东西发出警报。我计划使用 javascript 遍历数组并以这种方式创建包含 ng-click 的按钮(不确定这是否有效)。

angular.forEach(array, function(value, key) {
                var buttonArray = "dataItem."+value["column_name"];
                columns.push({field: value["column_name"], template: "<span ng-bind-html=\"templateFunction("+buttonArray+")\"></span>"});                    
            });


$scope.templateFunction = function(items){
    var template = "";
    //loop through items and create template accordingly
    angular.forEach(items, function(value, key) {
        //NOTE: unable to use ng-click with ng-bind-html, as it does not render the html here with angular
        //perhaps needs a custom directive to enable that. However if the template renders properly (with the help of a directive), then kendo-ui will duplicate the elements with each rendering.
        template += "<button kendo-button ng-click=\" test('Clicked button #"+value+"'); \">"+value+"</button>";
    });
    var returntemplate = $sce.trustAsHtml(template);

    //trust the template as html, so it renders properly as html
    return returntemplate;
 };

$scope.test = function(value){ alert(value); };

这以某种方式起作用，数组以正确的值循环遍历。这里的问题是这些模板中的 ng-click 没有被编译并绑定(bind)到范围，所以它们可以工作......解决方法是创建一个自定义指令，它使用 $compile 服务编译 html，但后来我发现了每次折叠/展开列时，kendo-ui 树列表都会复制所有列按钮。

所以本质上，我希望根据 dataItem.columnName 中的数组(并且 columnName 是通过外部 REST 资源获取的)通过 ng-click 创建按钮到 kendo-ui 树列表列中。

Answer 1

想通了!混淆是剑道模板语法和 angularjs 语法。

我可以使用以下 javascript/html 标记循环遍历 kendo-ui 模板中的数据:

"<span>
    # if("+buttonArray+"){for(var i = 0;i<"+buttonArray+".length;i++){ #
     <button ng-click=\"test(
     #= "+buttonArray+"[i] #
     );\">Rule
     #= "+buttonArray+"[i] #
     </button> 
     # } }#
     </span>"

请注意，代码的每一行都封装在#(散列)标记中，使它们成为 javascript to kendo。这在 Angular Controller 中使用并设置为列模板。 buttonArray 是列的每个单元格中包含的数据(基本上只是一个字符串“data.columnName”，在 kendo javascript 中使用)。

所以代码最终看起来像这样:

    $scope.test = function(value){
      alert("testing "+value);  
    };

angular.forEach(columnArray, function(value, key) {
                var buttonArray = "data."+value["column_name"];
                columns.push({field: value["column_name"], template: "<span># if("+buttonArray+"){ for(var i = 0;i<"+buttonArray+".length;i++){ # <button ng-click=\"test(#= "+buttonArray+"[i] #);\">Button#= "+buttonArray+"[i] #</button> # } }#</span>"});                    
            });

请注意，angular side 可以使用值作为“dataItem.columnName”，kendo 对“data.columnName”做同样的事情”。我试图让剑道 javascripts 使用 Angular 值...