角度材料虚拟滚动与angular-ui-tree给出错误

时间:2015-11-02 06:16:17

标签: javascript angularjs angular-material angular-ui-tree

我正在尝试在angular-ui-tree上实现Angular材料的虚拟滚动。但它给出了以下错误:

  

指令' uiTreeNode'所要求的控制器' uiTree',不能成为   发现!

对于plunker,请单击here

易于参考的代码如下:

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

});

1 个答案:

答案 0 :(得分:0)

我很确定这是因为this line。父选择器是问题,因为您之间有临时md-virtual-repeat-container指令。

要测试此理论,只需更改该行,即可在^前添加额外的^uiTree以查看其是否有效。

我要查看here信息,但请注意该文章的年龄(以及此帖的年龄......)。