Javascript 具有角度JS和剑道UI的树状视图_Javascript_Angularjs_Kendo Treeview

Javascript 具有角度JS和剑道UI的树状视图

javascript angularjs

Javascript 具有角度JS和剑道UI的树状视图,javascript,angularjs,kendo-treeview,Javascript,Angularjs,Kendo Treeview,在我的角度网中，我使用剑道UI来表示树状视图。这是我的html文件 <!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" hre

在我的角度网中，我使用剑道UI来表示树状视图。这是我的html文件

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

请告诉我我的密码有什么问题

谢谢

首先，您的代码需要一些修改

为了在angular中使用剑道指令，您需要引入对它们的依赖，这是在您的模块配置上完成的，没有这个配置，任何东西都可以工作

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

请注意，我们使用$scope.$apply来设置此消息，这是因为kendo使用的jQuery事件发生在angular的控制范围之外，因此angular不更新视图，因为他不知道必须使用$scope来更新视图。$apply我们强制angular更新绑定

一旦树配置中的检查事件应该取消注释，所有剑道事件处理程序都会接收一个参数作为参数，该参数包含指向小部件的指针

你能换一下吗？

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

// 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; });
}