Javascript 带角度ui树的角度材质虚拟滚动显示错误_Javascript_Angularjs_Angular Material_Angular Ui Tree

Javascript 带角度ui树的角度材质虚拟滚动显示错误

javascript angularjs angular-material

Javascript 带角度ui树的角度材质虚拟滚动显示错误,javascript,angularjs,angular-material,angular-ui-tree,Javascript,Angularjs,Angular Material,Angular Ui Tree,我正在尝试在上实现角度材质的虚拟滚动。但它给出了以下错误：指令“uiTreeNode”所需的控制器“uiTree”不能为空找到了对于plunker，请单击便于参考的代码如下： HTML <!doctype html> <html ng-app="RtmFrame"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"&

我正在尝试在上实现角度材质的虚拟滚动。但它给出了以下错误：

指令“uiTreeNode”所需的控制器“uiTree”不能为空找到了

对于plunker，请单击

便于参考的代码如下：

HTML

<!doctype html>
<html ng-app="RtmFrame">
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.min.js"></script>
  <script src="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc2/angular-material.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.10.0/angular-ui-tree.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.10.0/angular-ui-tree.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc2/angular-material.css">
  <script src="script.js"></script>
  <script type="text/ng-template" id="nodes_renderer.html">
    <div ui-tree-handle class="tree-node tree-node-content">
      {{node.title}}
      <a class="pull-right btn btn-danger btn-xs" data-nodrag>
        <span class="glyphicon glyphicon-remove"></span></a>
      <a class="pull-right btn btn-primary btn-xs" data-nodrag style="margin-right: 8px;"><span
        class="glyphicon glyphicon-plus"></span></a>
    </div>
    <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
      <li ng-repeat="node in node.nodes" ui-tree-node>
        <div ng-include="'nodes_renderer.html'"></div>
      </li>
    </ol>
  </script>
</head>

<body>

  <div ng-controller="Ctrl" style="overflow-y:hidden">
    <div ui-tree id="tree-root">
      <md-virtual-repeat-container style="height:200px;overflow-y:auto;width:300px;margin-top:200px">
        <ol ui-tree-nodes ng-model="data">
          <li md-virtual-repeat="node in data" ui-tree-node>
            <div ng-include="'nodes_renderer.html'"></div>
          </li>
        </ol>
      </md-virtual-repeat-container>
    </div>
  </div>
</body>
</html>

我很确定这是因为。父选择器是个问题，因为中间有一个临时

md virtual repeat container

指令

要测试这个理论，只需更改该行，在

^uiTree

前面添加一个额外的

，看看它是否有效

我会根据所看到的信息，但一定要注意那篇文章的年代（以及这篇文章的年代…）

var RtmFrame = angular.module('RtmFrame', ['ngMaterial', 'ui.tree' ]);

RtmFrame.controller('Ctrl', function($scope) {
$scope.test = "tester";
  $scope.data = [{
    'id': 1,
    'title': 'node1',
    'nodes': [{
      'id': 11,
      'title': 'node1.1',
      'nodes': [{
        'id': 111,
        'title': 'node1.1.1',
        'nodes': []
      }]
    }, {
      'id': 12,
      'title': 'node1.2',
      'nodes': []
    }]
  }, {
    'id': 2,
    'title': 'node2',
    'nodrop': true, // An arbitrary property to check in custom template for nodrop-enabled
    'nodes': [{
      'id': 21,
      'title': 'node2.1',
      'nodes': []
    }, {
      'id': 22,
      'title': 'node2.2',
      'nodes': []
    }]
  }, {
    'id': 3,
    'title': 'node3',
    'nodes': [{
      'id': 31,
      'title': 'node3.1',
      'nodes': []
    }]
  }, {
    'id': 3,
    'title': 'node3',
    'nodes': [{
      'id': 31,
      'title': 'node3.1',
      'nodes': []
    }]
  }, {
    'id': 3,
    'title': 'node3',
    'nodes': [{
      'id': 31,
      'title': 'node3.1',
      'nodes': []
    }]
  }, {
    'id': 3,
    'title': 'node3',
    'nodes': [{
      'id': 31,
      'title': 'node3.1',
      'nodes': []
    }]
  }, {
    'id': 3,
    'title': 'node3',
    'nodes': [{
      'id': 31,
      'title': 'node3.1',
      'nodes': []
    }]
  }, {
    'id': 3,
    'title': 'node3',
    'nodes': [{
      'id': 31,
      'title': 'node3.1',
      'nodes': []
    }]
  }, {
    'id': 3,
    'title': 'node3',
    'nodes': [{
      'id': 31,
      'title': 'node3.1',
      'nodes': []
    }]
  }, {
    'id': 3,
    'title': 'node3',
    'nodes': [{
      'id': 31,
      'title': 'node3.1',
      'nodes': []
    }]
  }];

});