在[angular]

时间:2016-11-29 12:38:29

标签: javascript angularjs angularjs-directive treeview

我正在尝试使用angular-treeview来创建文档树。但即使在完成所提到的所有步骤后,我得到的结果是[[object HTMLUListElement]]。现在我不确定我应该改变什么,我应该在哪里改变才能使其发挥作用。

以下是代码:

<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> : {{mytree.currentNode.roleName}}</span>
</div>

<!--
  [TREE attribute]
  angular-treeview: the treeview directive
  tree-id : each tree's unique id.
  tree-model : the tree model on $scope.
  node-id : each node's id
  node-label : each node's label
  node-children: each node's children
-->
<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>

<script>

   (function(){

    //angular module
    var myApp = angular.module("mainApp");

  //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" : [
          { "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
          { "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
        ]}
      ]}
    ]},

    { "roleName" : "Admin", "roleId" : "role2", "children" : [] },

    { "roleName" : "Guest", "roleId" : "role3", "children" : [] }
  ];

//test tree model 2
$scope.roleList2 = [
    { "roleName" : "User", "roleId" : "role1", "children" : [
      { "roleName" : "subUser1", "roleId" : "role11", "collapsed" : true, "children" : [] },
      { "roleName" : "subUser2", "roleId" : "role12", "collapsed" : true, "children" : [
        { "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
          { "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
          { "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
        ]}
      ]}
    ]},

    { "roleName" : "Admin", "roleId" : "role2", "children" : [
      { "roleName" : "subAdmin1", "roleId" : "role11", "collapsed" : true, "children" : [] },
      { "roleName" : "subAdmin2", "roleId" : "role12", "children" : [
        { "roleName" : "subAdmin2-1", "roleId" : "role121", "children" : [
          { "roleName" : "subAdmin2-1-1", "roleId" : "role1211", "children" : [] },
          { "roleName" : "subAdmin2-1-2", "roleId" : "role1212", "children" : [] }
        ]}
      ]}
    ]},

    { "roleName" : "Guest", "roleId" : "role3", "children" : [
      { "roleName" : "subGuest1", "roleId" : "role11", "children" : [] },
      { "roleName" : "subGuest2", "roleId" : "role12", "collapsed" : true, "children" : [
        { "roleName" : "subGuest2-1", "roleId" : "role121", "children" : [
          { "roleName" : "subGuest2-1-1", "roleId" : "role1211", "children" : [] },
          { "roleName" : "subGuest2-1-2", "roleId" : "role1212", "children" : [] }
        ]}
      ]}
    ]}
  ];



//roleList1 to treeview
$scope.roleList = $scope.roleList1;

});

})();

我已经包含了angular.treeview.js文件,并且它已正确加载。我已在控制台中检查过文件是否已加载。

此外,我还有一个单独的.js文件,它在bootstraping期间加载所有依赖项。 代码:

var app = angular.module("mainApp", ['ngRoute',
                                 'elif',
                                 'ui.bootstrap',
                                 'ngMessages',
                                 'ngSanitize',
                                 'ngTable',
                                 'angularUtils.directives.dirPagination',
                                 'ngFileUpload',
                                 'ngMaterial',
                                 'angularTreeview'
                                ]); 
....

我进入的结果:

enter image description here

Angular-treeView指令在控制台中正常加载。 enter image description here

我在这里缺少什么。我试图寻找解决方案,但没有成功。

1 个答案:

答案 0 :(得分:0)

我看到的一个问题是,您将一个名为mainApp的模块分配给变量myApp。因此,您应该使用var _paste = function() { var activeObject = _canvas.getActiveObject(), activeGroup = _canvas.getActiveGroup(); if (_clipboard.objects) { var group = new fabric.Group(); for (var i in _clipboard.objects) { var object = fabric.util.object.clone(_clipboard.objects[i]); group.addWithUpdate(object); } group .set("top", _clipboard.top + 5) .set("left", _clipboard.left + 5) .setCoords(); _canvas .setActiveGroup(group) .add(group); } else { var object = fabric.util.object.clone(_clipboard); object .set("top", _clipboard.top + 5) .set("left", _clipboard.left + 5) .setCoords(); _canvas .add(object) .setActiveObject(object) .renderAll(); } } 来创建控制器。请参阅下面的代码

myApp.controller('myController', function($scope){