2

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

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

  1. 预定义角度控制器中的列
  2. 根据接收到的 VIA REST 服务的数组将自定义列推送到现有列中。
  3. 为每一列设置自定义模板
  4. 根据包含 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 树列表都会复制所有列按钮。

因此，基本上我希望根据 dataItem.columnName 中的数组（并且 columnName 是通过外部 REST 资源获取）来创建带有 ng-click 到 kendo-ui 树列表列的按钮。

4

1 回答 1

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>"

请注意，代码的每一行都封装在#（哈希）标签中，使它们成为 javascript 到 kendo。这在 Angular 控制器中使用并设置为列模板。buttonArray 是列的每个单元格中包含的数据（基本上只是在 kendo javascript 中使用的字符串“data.columnName”）。

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

    $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>"});                    
            });

请注意，角度侧可以将值用作“ data Item .columnName”，而 kendo 使用“ data .columnName”做同样的事情。我试图让剑道 javascripts 使用角度值......

于 2015-03-05T12:59:20.927 回答