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

前端之家收集整理的这篇文章主要介绍了html – Angular treeview节点上的按钮不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我从网站下载了角度树视图
http://ngmodules.org/modules/angular.treeview并在我的项目中实现(VS C#)做了bundels等…无论如何……它在我的屏幕上提示正确.所以我可以点击“添加新点”按钮,它会添加新的NODE.

不工作:

>展开和折叠全部给出“RangeError:超出最大调用堆栈大小”
>加号按钮(蓝色是添加节点),x按钮(红色 – 删除)按钮不起作用.当我尝试单击添加节点或删除节点按钮时,它完全将它自己直接对准NODE,因为我喜欢移动节点.

它看起来像节点获得优先权和按钮节点.我在chrome中调试,当我点击按钮时,它没有进入控制器.

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

代码是从tree.js复制的

@H_403_14@<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,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",{ "id": 10,"title": "asdf",{ "title": "sssadf","id": "3",{ "id": 4,{ "id": 5,{ "id": 6,"title": "adsf ddd","nodes": [] } ] },{ "id": 7,"title": "dddsadf","nodes": [ { "id": 70,"title": "dadsfmme",{ "id": 71,"title": "adsfffe","nodes": [] } ] } ]; }]);

解决方法

>将AngularJS控制器添加到您的代码中 @H_403_14@<div class="container" ng-controller="supplierCtrl">

这将使它击中控制器.

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

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

使用此技术,您可以逐步执行角度代码并找出问题所在.系统地这样做直到找到问题为止.

猜你在找的HTML相关文章