AngularJS + Kendo-ui树形视图

Question

我有一些路线：

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框架内完成？ 看来我只是做错了什么...

更新：

好的，我知道在角度剑道中似乎可以正常工作...但是我无法使treeview正常工作：

我有控制权，例如：

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'" />

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

提前致谢。

Answer 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'
}

Answer 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 }
         ]

AngularJS + Kendo-ui树形视图

问题描述

2 个解决方案

解决方案1
7 已采纳 2013-09-02 01:45:26

解决方案2
-1 2014-07-15 23:00:20

AngularJS + Kendo-ui树形视图

问题描述

2 个解决方案

解决方案1 7 已采纳 2013-09-02 01:45:26

解决方案2 -1 2014-07-15 23:00:20

解决方案1
7 已采纳 2013-09-02 01:45:26

解决方案2
-1 2014-07-15 23:00:20