Question

我正在尝试使用此interesting looking Angular treeview component，但没有运气。

我知道这不是浏览器问题，因为当我从jsfiddle加载它时，它运行正常。（在Chrome上使用Chrome最新版本和IE浏览器）

我将粘贴从GIThub使用说明中下载的一些尖锐部分。

<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script type="text/javascript" src="/angular.treeview.js"></script>
    <link rel="stylesheet" type="text/css" href="css/angular.treeview.css">
    <script>
        (function () {
            //angular module
            var myApp = angular.module('myApp', ['angularTreeview']);
            //test controller
            myApp.controller('myController', function ($scope) { 
                //test tree model 1 

                $scope.roleList1 = [
                    { "roleName": "User", "roleId": "role1", "children": [
                        { "roleName": "subUser1", "roleId": "role11", "children": [] },
                        { "roleName": "subUser2", "roleId": "role12", "children": [
                            { "roleName": "subUser2-1", "roleId": "role121", "children": [ 
                                                        . . . 
                ]; 
    </script> 
</head> 
<body> 
<div ng-app="myApp"> 
    <div ng-controller="myController"> 
        <div> 
            <input type="button" value="TREE MODEL 1" data-ng-click="roleList = roleList1"/> 
            <input type="button" value="TREE MODEL 2" data-ng-click="roleList = roleList2"/> 
        </div> 
        <div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;"> 
            <span><b>Selected Node</b> : {{currentNode.roleName}}</span> 
        </div> 
        <div 
                data-angular-treeview="true" 
                data-tree-model="roleList" 
                data-node-id="roleId" 
                data-node-label="roleName" 
                data-node-children="children"> 
        </div> 
    </div> 
</div> 
</body>

这是我在查看页面时看到的内容。单击按钮不会执行任何操作。 enter image description here

有谁知道我可能做错了什么？

Answer 1

你的小提琴缺少属性data-tree-id。我查看了树视图的源代码，现在看来这是一个必要的属性（对它进行空检查）。将您的声明更改为

 <div data-angular-treeview="true" 
      data-tree-id="myTree"
      data-tree-model="roleList" 
      data-node-id="roleId" 
      data-node-label="roleName" 
      data-node-children="children"> 
 </div>

Answer 2

如果您的代码是最新的，则不会关闭括号和括号。 {{currentNode.roleName}}在您的DOM中显示的事实告诉我，语法错误或其他问题。检查你的调试器。

<script>
    (function () {
        //angular module
        var myApp = angular.module('myApp', ['angularTreeview']);
        //test controller
        myApp.controller('myController', function ($scope) { 
            //test tree model 1 

            $scope.roleList1 = [
                { "roleName": "User", "roleId": "role1", "children": [
                    { "roleName": "subUser1", "roleId": "role11", "children": [] },
                    { "roleName": "subUser2", "roleId": "role12", "children": [
                        { "roleName": "subUser2-1", "roleId": "role121", "children": [ 
                                                    . . . 
            ];
        });
    })();
</script>

另外，根据评论，您可能希望在树视图的路径中取消/。由于您在没有Web服务器的情况下进行本地测试，因此必须使用相对路径。确保angular.treeview.js与html位于同一目录中，然后将脚本标记更改为：

<script type="text/javascript" src="angular.treeview.js"></script>

编辑还有一点：您的ng-app代码中的html以及body代码似乎都有body。只需将代码从html移至<html ng-app="myApp"> ... <body>，即可拥有：

{{1}}

Answer 3

请检查您传递的值。你称之为* data-tree-model =＆＃34; roleList＆＃34; *但是在数据中你写了roleList1。

我认为这就是问题所在。

为什么我的AngularJS TreeView不起作用？

3 个答案: