为什么TreeView不加载在angular中

Why does TreeView not load in loaded in angular?

本文关键字：angular 加载 TreeView 为什么      更新时间：2023-09-26

我试图创建一个具有拖放功能的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>

砰砰作响:http://plnkr.co/edit/ueIUs4pDnWIrRKbVhvDq?p=preview

  1. 有一个语法错误，最后一个关闭)在底部脚本块中丢失。
  2. 控制器名称不匹配，MainCtrl注册，ng-controller使用ctrl
  3. 在第一个ng-repeat="item in list"中，它循环$scope.list，但数据在$scope.item中。

砰砰作响: http://plnkr.co/edit/crEDsbbN5e7wKVKbFPlZ?p=preview

相关文章：