Question

我从网站下载了角度树视图 http://ngmodules.org/modules/angular.treeview并在我的项目（VS C＃）中实现了bundels等...无论如何......它在我的屏幕上提示正确。所以我可以点击“添加新点”按钮，它会添加新的NODE。

不工作：

展开并折叠全部给出“RangeError：超出最大调用堆栈大小”
+加号按钮（蓝色是添加节点），x按钮（红色 - 删除）按钮不起作用。当我尝试单击添加节点或删除节点按钮时，它会完全将其自身直接对准NODE，因为我喜欢移动节点。

看起来节点获得优先级并且按钮节点。我在chrome中进行了调试，当我点击按钮时，它没有进入控制器。

我做错了什么？或者我该如何追踪它？它没有击中控制器:(

代码从tree.js

复制

   <div class="container">
    <h1 class="page-header">Tree - demo</h1>
    <a href="index.html"><i class="glyphicon glyphicon-chevron-left"></i> Back to overview page</a>
    <pre class="code">{{ edit }}</pre>
    <div class="row">
        <div class="col-lg-6">
            Options:
            <a href="" class="btn btn-default btn-sm pull-right" ng-click="">doc1 </a>
            <a href="" class="btn btn-default btn-sm pull-right" ng-click="">doc2 </a>
            <a href="" class="btn btn-default btn-sm pull-right" ng-click="">Copy Default Agenda</a>


            <hr />

            <h4 class="col-xs-12">
                Agenda
                <a href="" class="btn btn-default btn-sm pull-right" ng-click="collapseAll()">Collapse all</a>
                <a href="" class="btn btn-default btn-sm pull-right" ng-click="expandAll()">Expand all</a>
                <a href="" class="btn btn-default btn-sm btn-warning pull-right" ng-click="newItem()">Add New Point</a>
            </h4>

            <!-- Nested node template -->
            <script type="text/ng-template" id="nodes_renderer.html">
                <div ui-tree-handle class="tree-node tree-node-content">

                    <!--green left box-->
                    <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)">
                        <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span>
                    </a>

                    <!--input box for node-->
                    <span ng-hide="edit">{{node.title}}</span>

                    <!--edit mode-->
                    <a class="btn btn-default btn-xs" data-nodrag ng-hide="edit" ng-click="edit = true">
                        <span class="glyphicon glyphicon-pencil"></span>
                    </a>

                    <!--edit save-->
                    <input type="text" class="input input-xs" ng-show="edit" ng-model="node.title">
                    <a class="btn btn-success btn-xs" data-nodrag ng-show="edit" ng-click="edit = false">
                        <span class="glyphicon glyphicon-floppy-save"></span>
                    </a>

                    <!--remove-->
                    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </a>

                    <!--add-->
                    <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;">
                        <span class="glyphicon glyphicon-plus"></span>
                    </a>

                    <!--upload-->
                    <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="uploadFile(this)" style="margin-right: 8px;">
                        <span class="glyphicon glyphicon-paperclip"></span>
                    </a>


                </div>
                <!--node childs-->
                <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
                    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
                    </li>
                </ol>
            </script>

            <div class="col-xs-12">
                <div ui-tree id="tree-root">
                    <ol ui-tree-nodes="" ng-model="data">
                        <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <h3>Data binding</h3>
            <div class="info">
                {{info}}
            </div>
            <pre class="code">{{ data | json }}</pre>

        </div>
    </div>
</div>



app.controller('supplierCtrl', ['$scope', 'supplierService', function ($scope, supplierService) {
$scope.remove = function (scope) {
    scope.remove();
};


$scope.toggle = function (scope) {
    scope.toggle();
};

$scope.moveLastToTheBegginig = function () {
    var a = $scope.data.pop();
    $scope.data.splice(0, 0, a);
};

$scope.newSubItem = function (scope) {
    var nodeData = scope.$modelValue;

    nodeData.nodes.push({
        id: nodeData.id * 10 + nodeData.nodes.length,
        title: nodeData.title + '.' + (nodeData.nodes.length + 1),
        nodes: []
    });
};

$scope.newItem = function () {
    $scope.data.push({
        id: makeid(),
        title: 'New Point',
        nodes: []
    });
};

//$scope.uploadFile = function (scope) {
//    var x = scope;

//};

var getRootNodesScope = function () {
    return angular.element(document.getElementById('tree-root')).scope();
};

$scope.collapseAll = function () {
    var scope = getRootNodesScope();
    scope.collapseAll();
};

$scope.expandAll = function () {
    var scope = getRootNodesScope();
    scope.expandAll();
};

function makeid() {
    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for (var i = 0; i < 5; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    return text;
}

$scope.data = [
{
"title": "adsfff adsf",
"id": "0",
"nodes": [
  {
      "title": "sss",
      "id": "1",
      "nodes": []
  },
  {
      "id": 3,
      "title": "sdf Consultation",
      "nodes": []
  },
  {
      "id": 10,
      "title": "asdf",
      "nodes": []
  },
  {
      "title": "sssadf",
      "id": "3",
      "nodes": []
  },
  {
      "id": 4,
      "title": "asdf",
      "nodes": []
  },
  {
      "id": 5,
      "title": "asdf",
      "nodes": []
  },
  {
      "id": 6,
      "title": "adsf ddd",
      "nodes": []
  }
]
},
{
"id": 7,
"title": "dddsadf",
"nodes": [
  {
      "id": 70,
      "title": "dadsfmme",
      "nodes": []
  },
  {
      "id": 71,
      "title": "adsfffe",
      "nodes": []
  }
]
}
];

}]);

Answer 1

将AngularJS控制器添加到您的代码
```
<div class="container" ng-controller="supplierCtrl"> 
```
这将使它击中控制器。

如果这还没有解决问题，请在AngularJS代码的切换功能中添加JS警报

    $scope.toggle = function (scope) {
    alert('toggle function fired');
    scope.toggle();};

使用此技术，您可以逐步完成角度代码并找出问题所在。系统地这样做直到找到问题。

Angular treeview节点上的按钮不起作用

1 个答案: