angular material virtual scroll with angular-ui-tree gives error

Question

I am trying to implement virtual scroll of Angular material on angular-ui-tree . But its giving the following error :

Controller 'uiTree', required by directive 'uiTreeNode', can't be found!

For the plunker click here.

The code for easy reference is as follows :

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

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

});

icfantv · Accepted Answer · 2016-06-14 05:22:34Z

0

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.

To test this theory, simply change that line to add an additional ^ in front of ^uiTree to see if it works.

I'm going by the info seen here, but do note the age of that article (and the age of this post as well...).

answered Jun 14, 2016 at 5:22

icfantv

4,6537 gold badges41 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular material virtual scroll with angular-ui-tree gives error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related