Angularjs + kendo-ui 树视图答案

【问题标题】：Angularjs + kendo-ui treeviewAngularjs + kendo-ui 树视图
【发布时间】：2013-08-22 17:24:44
【问题描述】：

我有一些路线：

when('/tvtest/:userid', {templateUrl: 'template/usertv', controller: SomeTest}).

加载一些带有嵌入式 kendo-ui 控件的 html：

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://localhost:7000/myservice/script/jquery.min.js"></script>
    <script type="text/javascript" src="http://localhost:7000/myservice/script/kendo.all.min.js"></script>

   </head>
<body>

    <h1>{{"Hello"}}</h1>

        <div id="example" class="k-content">
            <div class="demo-section">
                <ul id="treeview"/>
            </div>

            <script >
             console.log("test message");
             var dataSource = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                url: "http://demos.kendoui.com/service/Employees",
                dataType: "jsonp"
            }
                        },
            schema: {
            model: {
                id: "EmployeeId",
                hasChildren: "HasEmployees"
                    }
                    }
                });

            $("#treeview").kendoTreeView({
                            dataSource: dataSource,
                            dataTextField: "FullName"
                            });
            console.log(kendo);

    dataSource.read();
            </script>

    {{user.UserName}}

        </div>
</body>
</html>

它是示例树视图，它不适用于路由，它打印“Hello”，一些用户名，但它不显示树视图，它甚至不在控制台上打印“测试消息”，它甚至不会尝试加载 jquery 和 kendo scipts。是因为加载某些模板时忽略了脚本标签的内容吗？我听说过angular-kendo 项目，但我很好奇是否可以仅在 AngularJS 和 kendo-ui 框架内完成？看来我只是做错了……

更新：

好的，我知道在 angular-kendo 中，事情似乎正在发挥作用...... 但我无法让树视图工作：

我有控制权，比如：

function HomeCtrl($scope) {
  $scope.things = {
    dataSource: {
      data: [{ name: "Thing 1", id: 1 },
             { name: "Thing 2", id: 2 },
             { name: "Thing 3", id: 3 }]
    }   
}}

我返回了带有以下 html 的模板文件：

   <div  kendo-tree-view   
         k-data-source="things"
     k-data-text-field="'name'" />

但它不起作用......我做错了什么？？？

提前致谢。

【问题讨论】：

标签： javascript angularjs kendo-treeview

【解决方案1】：

如果不使用k-options，我永远无法让剑道树视图工作，如下所示：

http://jsfiddle.net/L6vSX/

查看：

<div kendo-tree-view k-options="things">

控制器：

$scope.things = {
    dataSource: {
      data: [{ name: "Thing 1", id: 1 },
             { name: "Thing 2", id: 2 },
             { name: "Thing 3", id: 3 }]
    },
    dataTextField: 'name'
}

【讨论】：

+1 刚刚看到这个答案。谢谢！ k-options 有效，而 k-data-source 无效。所以效果很好。但是，在我的情况下，我还有一个额外的问题 - 当用户选中一个复选框时，我通过 ngChange 触发了一个控制器方法，该方法删除了数据源中的一个项目。但是，我的树视图似乎没有刷新以删除已删除的行。这可能是你遇到的事情吗？有人看到数据源更新没有触发树刷新的任何此类问题吗？知道它是否应该在这种情况下工作？
如果你对它有兴趣，我会看看（如果你提出问题，其他人可能也会：P）
感谢您的建议。我在stackoverflow.com/questions/22587975/… 创建了一个新问题 - 使用 jsfiddle。

【解决方案2】：

这是我的做法，它是这样工作的：

<div  kendo-tree-view  k-data-source="things"  />

 $scope.things = [
         { name: "Thing 1", id: 1 },
         { name: "Thing 2", id: 2 },
         { name: "Thing 3", id: 3 }
         ]

【讨论】：