angularjs - Angular TreeView 节点上的按钮不起作用

Question

我从网站下载了 Angular TreeView http://ngmodules.org/modules/angular.treeview 并在我的项目 (VS C#) 中实现了 bundels 等......无论如何......它在我的屏幕上提示正确。所以我可以点击“添加新点”按钮，它会添加新的节点。

不工作:

• 全部展开和折叠会出现“RangeError:超出最大调用堆栈大小”

• +plus 按钮(蓝色是添加节点)、x 按钮(红色是删除)按钮不起作用。当我尝试单击“添加节点”或“删除节点”按钮时，由于我喜欢移动节点，它会完全将其自身直接集中在 NODE 上。

看起来节点获得优先权，按钮节点获得优先权。我在 chrome 中调试，当我点击按钮时，它没有进入 Controller 。

我做错了什么？或者我怎样才能追踪到它？它不会击中 Controller :(

代码复制自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

1. 将 AngularJS Controller 添加到您的代码中

   <div class="container" ng-controller="supplierCtrl"> 
   

   这将使它击中 Controller 。

如果这不能解决问题，请将 JS 警报添加到 AngularJS 代码的切换功能

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

使用此技术，您可以单步执行 Angular 代码并找出问题所在。系统地执行此操作，直到找到问题。