带有Angular-ui-tree的角材料虚拟滚动给出错误

Question

I am trying to implement virtual scroll of Angular material on angular-ui-tree . 我正在尝试在angular-ui-tree上实现Angular材质的虚拟滚动。 But its giving the following error : 但是它给出了以下错误：

Controller 'uiTree', required by directive 'uiTreeNode', can't be found! 找不到指令'uiTreeNode'所需的控制器'uiTree'！

For the plunker click here . 对于the头，请单击此处。

The code for easy reference is as follows : 便于参考的代码如下：

HTML 的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>

JS JS

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': []
    }]
  }];

});

Answer 1

I'm pretty sure it's because of this line . 我很确定这是因为这条线。 The parent selector is the problem since you have the interim md-virtual-repeat-container directive in between. 父选择器是问题所在，因为您在两者之间有一个临时的md-virtual-repeat-container指令。

To test this theory, simply change that line to add an additional ^ in front of ^uiTree to see if it works. 为了验证这一理论，简单地改变该行增加一个额外的^前面^uiTree ，看看它是否工作。

I'm going by the info seen here , but do note the age of that article (and the age of this post as well...). 我要查看此处显示的信息，但要注意该文章的使用年限（以及本帖子的使用年限...）。

带有Angular-ui-tree的角材料虚拟滚动给出错误

问题描述

1 个解决方案

解决方案1
0 2016-06-14 05:22:34

带有Angular-ui-tree的角材料虚拟滚动给出错误

问题描述

1 个解决方案

解决方案1 0 2016-06-14 05:22:34

解决方案1
0 2016-06-14 05:22:34