Question

在我的角度网站中，我使用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事件发生在angular的控制之外，因此angular不会更新视图，因为他没有知道他必须这样做，使用$ scope。$ apply我们强制Angular更新绑定。
树配置中的onCheck事件应取消注释，所有kendo事件处理程序都接收一个参数作为参数，其中包含指向窗口小部件的指针。 documentation

使用Angular JS和Kendo UI的树视图

1 个答案: