Question

我目前正在使用Kendo-UI和AngularJS。我试图让treelist根据它接收的dateItem。[column_name]数组将按钮渲染到列中。我无法生成具有绑定ng-click指令的按钮。

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

预定义角度控制器中的列
根据数组将自定义列推送到现有列中收到VIA REST服务。
将自定义模板设置为每列
根据包含ng-click指令的dataItem。[custom_column]数组在自定义模板中创建按钮。

我很难掌握语法和绑定角度。对于自定义列中的每个数组项，最终结果应该有一个按钮，包含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>"});                    
            });

这只是警告TEXT'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没有编译并绑定到作用域，因此它们可以工作......解决方法是创建一个使用$ compile服务编译html的自定义指令，但后来我发现了每次折叠/展开列时，kendo-ui treelist都会复制所有列按钮。

所以基本上我希望根据dataItem.columnName中的数组（并且通过外部REST资源获取columnName），使用ng-click创建按钮到kendo-ui treelist列中。

Answer 1

想出来！令人困惑的是kendo模板语法和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>"

请注意，代码的每个其他行都封装在＃（hash）标记中，使它们成为jndo to kendo。这在Angular控制器中使用，并设置为列模板。 buttonArray是列的每个单元格中包含的数据（基本上只是一个字符串＆＃34; data.columnName＆＃34;在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>"});                    
            });

请注意，角度边可以使用值作为＆＃34; 数据项目 .columnName＆＃34;和剑道用＆＃34; 数据 .columnName＆＃34;做同样的事情。我试图让kendo javascripts与角度值一起工作......

带有dataItem数组和角度ng-click的Kendo treelist模板

1 个答案: