使用 Angular JS 和 Kendo UI 的树视图

Question

在我的 angular 网站中，我使用 Kendo 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>

这是我的 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);

请告诉我我的代码有什么问题。

谢谢

Answer 1

首先你的代码需要一些修改

为了在 angular 中使用 kendo 指令，你需要引入对它们的依赖，这是在你的模块配置上完成的，没有这个配置任何东西都会工作
```
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 事件发生在 [= 的控制之外33=]，所以 angular 不会更新视图，因为他不知道他必须这样做，使用 $scope.$apply 我们强制它 Angular 更新绑定。
树配置中的 onCheck 事件应该取消注释，所有 kendo 事件处理程序接收一个参数作为参数，其中包含指向小部件的指针。 documentation

使用 Angular JS 和 Kendo UI 的树视图

Tree View with Angular JS and Kendo UI

javascript

angularjs

kendo-treeview