Шаблон древовидного списка кендо с массивом dataItem и угловым ng-click

В настоящее время я работаю с Kendo-UI и AngularJS. Я пытаюсь заставить древовидный список отображать кнопки в столбцах в соответствии с массивом dateItem.[column_name], который он получает. Я не могу создавать кнопки, в которых есть связанная директива ng-click.

В настоящее время я пытаюсь сделать следующее:

  1. Предопределить столбцы в угловом контроллере
  2. Вставьте пользовательские столбцы в существующие столбцы в соответствии с массивом, полученным ЧЕРЕЗ службу REST.
  3. Установите собственный шаблон для каждого столбца
  4. Создайте кнопки в пользовательских шаблонах в соответствии с массивом dataItem.[custom_column], содержащим директиву ng-click.

Мне трудно понять синтаксис и привязку к angular. Конечный результат этого должен иметь кнопку для каждого из элементов массива в пользовательском столбце, содержащую ng-щелчок.

Что я уже пробовал:

            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 в этих шаблонах не скомпилирован и не привязан к области, поэтому они будут работать... Обходным путем для этого было бы создание пользовательской директивы, которая компилирует html с помощью службы $compile, но потом я узнал этот древовидный список kendo-ui будет дублировать все кнопки столбца каждый раз, когда столбец сворачивается/расширяется.

По сути, я пытаюсь создать кнопки с помощью ng-click в столбцах древовидного списка kendo-ui в соответствии с массивом в dataItem.columnName (и имя столбца получается через внешний ресурс REST).


javascript arrays angularjs kendo-ui kendo-template
person jasmo    schedule 05.03.2015    source источник
comment
Функциональность может быть достигнута изначально с помощью ng-repeat для массива в шаблоне. Однако, если вы используете это, вы столкнетесь с проблемой дублирования ng-repeat каждый раз, когда перезагружается древовидный список (и, таким образом, дублируется каждый элемент ng-repeat). Пример ячейки при первой загрузке (все работает хорошо): [button1][button2][button3] Затем после свертывания/расширения узла: [button1][button1][button2][button2][button3][button3]   -  person jasmo    schedule 05.03.2015

Ответы (1)


arrow_upward
1
arrow_downward

Догадаться! Путаница была с синтаксисом шаблона кендо и синтаксисом angularjs.

Я могу просмотреть данные в шаблоне kendo-ui со следующей разметкой javascript/html:

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

Обратите внимание, что каждая вторая строка кода заключена в теги # (хэш), что делает их javascript для кендо. Это используется в контроллере Angular и устанавливается в качестве шаблона столбца. buttonArray — это данные, содержащиеся в каждой ячейке для столбца (в основном просто строка «data.columnName», которая используется в 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 может использовать значения как «dataItem.columnName», и кендо делает то же самое с «data.columnName». Я пытался заставить javascripts кендо работать с угловыми значениями...

person jasmo    schedule 05.03.2015