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

前端之家收集整理的这篇文章主要介绍了html – Angular treeview节点上的按钮不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我从网站下载了角度树视图
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,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控制器添加到您的代码
<div class="container" ng-controller="supplierCtrl">

这将使它击中控制器.

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

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

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

原文链接:https://www.f2er.com/html/227173.html

猜你在找的HTML相关文章