Вид на дерево с угловым JS и Kendo UI

-1

В моей угловой сети я использую пользовательский интерфейс Kendo для представления дерева. Вот мой html-файл.Вид на дерево с угловым JS и Kendo UI

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" /> 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" /> 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script> 
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script> 
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"> </script> 
</head> 
<body> 
<div ng-app="myapp"> 
    <div ng-controller="myappCtrl"> 

     <div ng-attr-id="{{ treeview }}" kendo-tree-view k-options="treeview"></div> 
    </div> 
    <div style="padding-top: 2em;"> 
     <h4>Selected:</h4> 
     <p ng-attr-id="{{ selected }}">No interests selected.</p> 
    </div> 
</div> 
<script src="../scripts/test.js"></script> 
</body> 
</html>

И это мой test.js

var app = angular.module('myapp', []); 

app.controller('myappCtrl', function($scope, $http, $window) { 

$scope.dataModal = [ { 
    "key" : "Key", 
    "type" : "type", 
    "value" : 1, 
    "items" : [ { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ { 
        "key" : "Key", 
        "type" : "type1", 
        "items" : [ 

        ] 
       }, { 
        "key" : "Key", 
        "type" : "type1", 
        "items" : [ 

        ] 
       } ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ { 
        "key" : "Key", 
        "type" : "type1", 
        "items" : [ 

        ] 
       } ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      }, { 
       "key" : "Key", 
       "type" : "type1", 
       "items" : [ 

       ] 
      } ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     }, { 
      "key" : "Key", 
      "type" : "type1", 
      "items" : [ 

      ] 
     } ] 
    }, { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ 

     ] 
    }, { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ 

     ] 
    }, { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ 

     ] 
    }, { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ 

     ] 
    }, { 
     "key" : "Key", 
     "type" : "type1", 
     "items" : [ 

     ] 
    } ] 
}, { 
    "key" : "Key", 
    "type" : "type1", 
    "value" : 1, 
    "items" : [ { 
     "key" : "subUser1", 
     "type" : "role11", 
     "items" : [ 

     ] 
    } ] 
}, { 
    "key" : "Key", 
    "type" : "type1", 
    "value" : 1, 
    "items" : [ { 
     "key" : "subUser1", 
     "type" : "role11", 
     "items" : [ 

     ] 
    } ] 
}, { 
    "key" : "Key", 
    "type" : "type1", 
    "value" : 1, 
    "items" : [ { 
     "key" : "subUser1", 
     "type" : "role11", 
     "items" : [ 

     ] 
    } ] 
}, { 
    "key" : "Key", 
    "type" : "type1", 
    "value" : 1, 
    "items" : [ { 
     "key" : "subUser1", 
     "type" : "role11", 
     "items" : [ 

     ] 
    } ] 
}, { 
    "key" : "Key", 
    "type" : "type1", 
    "value" : 1, 
    "items" : [ { 
     "key" : "subUser1", 
     "type" : "role11", 
     "items" : [ 

     ] 
    } ] 
} ]; 

$scope.treeview = { 
    checkboxes : { 
     checkChildren : true 
    }, 
    //check : onCheck, 
    dataTextField : "key", 
    loadOnDemand : false, 
    dataSource : $scope.dataModal 
}; 

// get keys of checked nodes 
function checkedNodeIds(nodes, checkedNodes) { 
    for (var i = 0; i < nodes.length; i++) { 
     if (nodes[i].checked) { 
      checkedNodes.push(nodes[i].key); 
     } 

     if (nodes[i].hasChildren) { 
      checkedNodeIds(nodes[i].children.view(), checkedNodes); 
     } 
    } 
} 

// show checked nodes on data source change 
function onCheck() { 
    var checkedNodes = []; 
    var treeView = $("#treeview").data("kendoTreeView"); 
    var message = ""; 

    checkedNodeIds(treeView.dataSource.view(), checkedNodes); 

    if (checkedNodes.length > 0) { 
     message = "Selected Interests: " + checkedNodes.join(", "); 
    } else { 
     message = "No Interests Checked."; 
    } 

    $("#selected").html(message); 
} 

});

Моя страница отображает древовидную. И я использую две функции для получения выбранных элементов дерева. Но он дает ошибку в журнале консоли, как показано ниже.

test.js:347 Uncaught TypeError: Cannot read property 'dataSource' of null 

Line 347: checkedNodeIds(treeView.dataSource.view(), checkedNodes);

Пожалуйста, будьте любезны, чтобы показать мне, что не так с моими кодами.

Спасибо

источник

2016-04-05 Rose18

Прежде всего кода необходимо внести некоторые изменения

Для того, чтобы использовать директивы кендо внутри углового необходимо ввести зависимость от них, это делается на конфигурации модуля, без этой конфигурации ничего будет работать
```
var app = angular.module('myapp', ['kendo.directives']); 
```

Вы должны избегать использования JQuery селекторов на контроллерах, это место находится в angualr. Для того, чтобы установить выходное сообщение зрения вы можете просто использовать переменную в Вашей области, а затем связать его с точки зрения

// show checked nodes on data source change 
function onCheck(kendoEvent) { 

    var checkedNodes = []; 
    var treeView = kendoEvent.sender; 
    var message = ""; 

    checkedNodeIds(treeView.dataSource.view(), checkedNodes); 

    if (checkedNodes.length > 0) { 
     message = "Selected Interests: " + checkedNodes.join(", "); 
    } else { 
     message = "No Interests Checked."; 
    } 

    $scope.$apply(function() { $scope.selectedItems = message; }); 
}

Обратите внимание, что мы используем $ объем. $ Применяется, чтобы установить это сообщение, это потому что события jQuery, которые используются kendo, происходят вне контроля углового, поэтому угловой не обновляет представление, потому что он не знает, что он должен это делать, используя $ scope. $ apply мы вынуждаем его Угловое обновление привязок ,
Событие, которое должно быть включено в конфигурацию события внутри проекта, все обработчики событий kendo получают параметр в качестве аргумента, который содержит указатель на виджет. documentation

источник

2016-04-05 11:52:57 Alberto

Не могли бы вы изменить его? – Rose18

Вид на дерево с угловым JS и Kendo UI

ответ

Смежные вопросы