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:

<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. 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? 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:

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:

   <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.

回答1:

I've never been able to get a kendo tree view working without using k-options like the following:

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

回答2:

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

来源：https://stackoverflow.com/questions/18386992/angularjs-kendo-ui-treeview

标签

javascript

angularjs

kendo-treeview