Javascript 为什么使用嵌套列表时不加载css。。？_Javascript_Jquery_Angularjs_Angularjs Directive

Javascript 为什么使用嵌套列表时不加载css。。？

javascript jquery angularjs

Javascript 为什么使用嵌套列表时不加载css。。？,javascript,jquery,angularjs,angularjs-directive,Javascript,Jquery,Angularjs,Angularjs Directive,从这个链接学习之后，我做了一个简单的介绍演示就在这里但它不显示“+”、“V”和“X”图标为什么 {{item.title} {{subItem.title} var myAppModule=angular.module（'MyApp'，['ui.tree']）； myAppModule.controller（'MainCtrl'，函数（$scope）{ $scope.list=[{ “id”：1， “标题”：“1.龙息”， “项目”：[] }, { “id”：2， “标题”：“2

从这个链接学习之后，我做了一个简单的介绍演示就在这里但它不显示“+”、“V”和“X”图标为什么



{{item.title}

{{subItem.title}


var myAppModule=angular.module（'MyApp'，['ui.tree']）；
myAppModule.controller（'MainCtrl'，函数（$scope）{
$scope.list=[{
“id”：1，
“标题”：“1.龙息”，
“项目”：[]
}, {
“id”：2，
“标题”：“2.云纹视觉”，
“项目”：[{
“id”：21，
“标题”：“2.1.豆腐动画”，
“项目”：[{
“id”：211，
“标题”：“2.1.1.幽灵长颈鹿”，
“项目”：[]
}, {
“id”：212，
“标题”：“2.1.2.泡沫破裂”，
“项目”：[]
}],
}, {
“id”：22，
“标题”：“2.2.徒手原子分裂”，
“项目”：[]
}],
}, {
“id”：3，
“标题”：“3.独角兽猎手”，
“项目”：[]
}, {
“id”：4，
“标题”：“4.浪漫的幽会”，
“项目”：[]
}];
})

我错在哪里。。？你能告诉我吗

您只是包含了错误的

ui树句柄模板
工作版本：
使用以下命令：
<div ui-tree-handle>
    <a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
        {{item.title}}
    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
    <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
</div>


{{item.title}

与此相反：
<div ui-tree-handle>
    {{item.title}}
</div>


{{item.title}

你们的子项也一样。我刚刚从答案中整理了一些东西。
以下是我更改的更新内容
更新了angular ui树的源代码（提供的plunkr
使用了dropbox
源代码）

创建了一个新的项目呈现器.html
。这将为每个项目创建一个列表呈现器，以清理和简化代码。这有助于无限嵌套
item_.html
 <div ui-tree-handle class="tree-node tree-node-content">
    <a class="btn btn-success btn-xs"  data-nodrag ng-click="toggle(this)"><span
        class="glyphicon"
        ng-class="{
          'glyphicon-chevron-right': collapsed,
          'glyphicon-chevron-down': !collapsed
        }"></span></a>
    {{item.title}}
    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
    <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span
        class="glyphicon glyphicon-plus"></span></a>
  </div>
  <ol ui-tree-nodes="" ng-model="item.items" ng-class="{hidden: collapsed}">
    <li ng-repeat="item in item.items" ui-tree-node ng-include="'item_renderer.html'">
    </li>
  </ol>

1.将脚本包括在主体
标记或头部
标记中。2.这些“图标”取自引导，所以您应该将其添加到您的PlunkOK等待检查..我已经添加了，请检查Plunk..您可以共享您的Plunk以便我检查我的错误位置吗谢谢回答..但为什么它不是折叠或扩展。使用“>”和“v”@GearsDigital当你看到它将在用户单击“Buddy，你不应该在不知道你在做什么或者你不能正确复制和粘贴的情况下更改其他人的代码；”时，它将折叠和展开。你需要包括ng class=“{hidden:collapsed}”。我已经更新了plunker。请看第27行
 <div ui-tree-handle class="tree-node tree-node-content">
    <a class="btn btn-success btn-xs"  data-nodrag ng-click="toggle(this)"><span
        class="glyphicon"
        ng-class="{
          'glyphicon-chevron-right': collapsed,
          'glyphicon-chevron-down': !collapsed
        }"></span></a>
    {{item.title}}
    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
    <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span
        class="glyphicon glyphicon-plus"></span></a>
  </div>
  <ol ui-tree-nodes="" ng-model="item.items" ng-class="{hidden: collapsed}">
    <li ng-repeat="item in item.items" ui-tree-node ng-include="'item_renderer.html'">
    </li>
  </ol>

    <!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <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>
    <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="angular-ui-tree@*" data-semver="2.8.0" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.css" />
    <script data-require="angular-ui-tree@*" data-semver="2.8.0" src="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.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>
  </head>

  <body>
    <div ng-controller="MainCtrl">
        <!-- Nested node template -->
        <div class="row">
            <div class="col-sm-6">
                <div ui-tree id="tree-root">
                    <ol ui-tree-nodes ng-model="list">
                        <li ng-repeat="item in list" ui-tree-node ng-include="'item_renderer.html'"></li>
                    </ol>
                </div>
            </div>
      </div>
    </div>

  </body>

</html>

var myAppModule = angular.module('MyApp', ['ui.tree']);
 myAppModule.controller('MainCtrl', function($scope) {

   $scope.remove = function (scope) {
            scope.remove();
        };

        $scope.toggle = function (scope) {
            scope.toggle();
        };

        $scope.moveLastToTheBeginning = function () {
            var a = $scope.list.pop();
            $scope.list.splice(0, 0, a);
        };

        $scope.newSubItem = function (scope) {
            var nodeData = scope.$modelValue;
            console.log(nodeData);
            nodeData.items.push({
                id: nodeData.id * 10 + nodeData.items.length,
                title: nodeData.title + '.' + (nodeData.length + 1),
                items: []
            });
        };
     $scope.list = [{
      "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": []
    }];
 })