简体   繁体   English

AngularJS + Kendo-ui树形视图

[英]Angularjs + kendo-ui treeview

I have some route: 我有一些路线:

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

which loads some html with emebedded kendo-ui controls: 加载了带有嵌入的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>

It is sample treeview and it doesn't work with routing, it print "Hello", some user name, but it doesn't show treeview, it even doesn't print "test message" on console, it is even doesn't try to load jquery and kendo scipts. 它是示例树视图,不适用于路由,它显示“ Hello”,一些用户名,但不显示树视图,甚至不显示控制台上的“测试消息”,甚至不显示尝试加载jquery和kendo scipts。 Is it because contents of script tag are ignored when I load some template? 是因为加载模板时脚本标签的内容被忽略了吗? I heared about angular-kendo project, but I'm curious whether it is possible to accomplish within only AngularJS and kendo-ui frameworks? 我听说过有关angular- kendo项目的信息,但我很好奇是否有可能仅在AngularJS和kendo-ui框架内完成? It seems that I simply doing smth wrong... 看来我只是做错了什么...

UPDATE : 更新

Ok, I understood that within angular-kendo things seems to be working... But I cannot get treeview working: 好的,我知道在角度剑道中似乎可以正常工作...但是我无法使treeview正常工作:

I have control, like: 我有控制权,例如:

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

I have template file returned with following html: 我有以下html返回的模板文件:

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

But it doesn't work... What I'm doing wrong??? 但这不起作用...我做错了什么???

Thanks in advance. 提前致谢。

I've never been able to get a kendo tree view working without using k-options like the following: 如果不使用如下k-options我将永远无法使剑道树视图正常工作:

http://jsfiddle.net/L6vSX/ http://jsfiddle.net/L6vSX/

View: 视图:

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

Controller: 控制器:

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

Here's the way I do it, and it works this way : 这是我做的方法,它是这样工作的:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM