Question

我想创建一个具有拖放功能的TreeView。我用这个插件 http://ngmodules.org/modules/angular-ui-tree，这里有一个演示：

http://jimliu.github.io/angular-ui-tree/

但是当我做同样的事情时，文档中写的TreeView无法加载 - 为什么？

这是我的代码。

<html ng-app="MyApp">

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />

    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
     <script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
  </head>

  <body>
  <div ng-controller="ctr">
<div ui-tree >
  <ol ui-tree-nodes="" ng-model="list">
    <li ng-repeat="item in list" ui-tree-node>
      <div ui-tree-handle>
        {{item.title}}
      </div>
      <ol ui-tree-nodes="" ng-model="item.items">
        <li ng-repeat="subItem in item.items" ui-tree-node>
          <div ui-tree-handle>
            {{subItem.title}}
          </div>
        </li>
      </ol>
    </li>
  </ol>
</div>
</div>
</body>
<script>
  var myAppModule = angular.module('MyApp', ['ui.tree']);
 myAppModule.controller('MainCtrl', function($scope) {
     $scope.item = [{
      "id": 1,
      "title": "1. dragon-breath",
      "items": []
    }, {
      "id": 2,
      "title": "2. moiré-vision",
      "items": [{
        "id": 21,
        "title": "2.1. tofu-animation",
        "items": [{
          "id": 211,
          "title": "2.1.1. spooky-giraffe",
          "items": []
        }, {
          "id": 212,
          "title": "2.1.2. bubble-burst",
          "items": []
        }],
      }, {
        "id": 22,
        "title": "2.2. barehand-atomsplitting",
        "items": []
      }],
    }, {
      "id": 3,
      "title": "3. unicorn-zapper",
      "items": []
    }, {
      "id": 4,
      "title": "4. romantic-transclusion",
      "items": []
    }];
 }
</script>

</html>

Plunker： http://plnkr.co/edit/ueIUs4pDnWIrRKbVhvDq?p=preview

Answer 1

语法错误，底部脚本块中缺少最后一个结束)。
控制器名称不匹配，MainCtrl已注册但ctrl用于ng-controller。
在第一个ng-repeat="item in list"中，它会循环显示$scope.list，但数据位于$scope.item。

Plunker： http://plnkr.co/edit/crEDsbbN5e7wKVKbFPlZ?p=preview

为什么TreeView没有以角度加载？

1 个答案: