Question

我尝试使用angular-ui-tree，但崩溃不起作用。我使用他们的github中的示例进行了微小的更改，但id没有帮助。

我的例子： http://plnkr.co/edit/MIMQ0GWnhQnZ1AhhKzo5?p=preview

<body ng-controller="tCtrl">
<div class="tree">
  <div class="row">
    <div class="col-sm-12">
      <h3>Basic Example</h3>
      <button ng-click="expandAll()">Expand all</button>
      <button ng-click="collapseAll()">Collapse all</button>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <div ui-tree="" id="tree-root">
        <ol ui-tree-nodes="" ng-model="listss">
          <li ng-repeat="t in listss" ui-tree-node="">
            <div ui-tree-handle="" class="tree-node tree-node-content">
              <button data-nodrag="" ng-click="toggle(this)">saad</button>
              {{t.name}}
            </div>
            <ol ui-tree-nodes="" ng-model="t.list" ng-class="{hidden: collapsed}">
              <li ng-repeat="s in t.list" ui-tree-node="">
                <div ui-tree-handle="" class="tree-node tree-node-content">
                  <button ng-click="toggle(this)">sad</button>
                  {{s.name}}
                </div>
              </li>
            </ol>
          </li>
        </ol>
      </div>
    </div>
  </div>
</div>
</body>

Answer 1

你错过了CSS课程。请插入您的文件CSS。

.hidden {    
    display: none!important;    
    visibility: hidden!important;
}

Github使用bootstrap.min.css

Answer 2

尝试以下方法：

在控制器中添加一些选项：

$scope.treeOptions = { accept: function (sourceNodeScope, destNodesScope, destIndex) { return false; }, };

2.注意树视图：

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(); };

替换以下行：<div ui-tree="" id="tree-root"> div ui-tree="treeOptions>"

5.可选：将id =“tree-root”放在<ol>元素上。

angular-ui-tree崩溃/扩展无法正常工作

2 个答案: