AngularJS UI Tree：PUG模板下单个树头部的非ng-repeat实现方案问询

当然有更简洁的方案！既然头部节点始终是单个，完全没必要把它塞进数组里用ng-repeat渲染，我们可以直接单独渲染头部节点，然后把其余节点嵌套在它的子节点容器里，完美适配AngularJS UI Tree的结构。

第一步：调整控制器数据处理 #

不用再把头部包装成数组，直接从原数据中拆分出头部和子节点集合：

// 假设你的原始分类数据是$scope.categories，第一个元素是头部
$scope.categoriesHeader = $scope.categories[0];
// 提取剩下的所有节点作为头部的子节点
$scope.childCategories = $scope.categories.slice(1);

// 如果UI Tree要求节点自带children属性（部分版本需要），可以直接给头部赋值：
$scope.categoriesHeader.children = $scope.childCategories;

第二步：编写PUG模板（无需头部的ng-repeat） #

直接单独渲染头部节点，然后在头部内部的ui-tree-nodes容器中渲染子节点：

div(ui-tree)
  //- 直接渲染单个头部节点，完全不需要ng-repeat
  div(ui-tree-node, ng-model="categoriesHeader")
    div(ui-tree-handle) {{ categoriesHeader.title }}
    //- 子节点容器，绑定子节点集合并循环渲染
    div(ui-tree-nodes, ng-model="childCategories")
      div(ui-tree-node, ng-repeat="category in childCategories")
        div(ui-tree-handle) {{ category.title }}
        //- 如果子节点还有嵌套层级，继续嵌套ui-tree-nodes即可
        div(ui-tree-nodes, ng-model="category.children")
          div(ui-tree-node, ng-repeat="child in category.children")
            div(ui-tree-handle) {{ child.title }}

如果你的UI Tree版本更依赖节点自身的children属性（比如拖拽功能需要），可以用更贴合默认结构的写法：

div(ui-tree)
  div(ui-tree-node, ng-model="categoriesHeader")
    div(ui-tree-handle) {{ categoriesHeader.title }}
    //- 直接绑定头部的children属性
    div(ui-tree-nodes, ng-model="categoriesHeader.children")
      div(ui-tree-node, ng-repeat="category in categoriesHeader.children")
        div(ui-tree-handle) {{ category.title }}
        div(ui-tree-nodes, ng-model="category.children")
          div(ui-tree-node, ng-repeat="child in category.children")
            div(ui-tree-handle) {{ child.title }}

为什么这个方案更好？ #

• 完全避免了不必要的数组包装和单个元素的ng-repeat，代码更简洁直观
• 严格遵循AngularJS UI Tree的节点嵌套逻辑，头部作为根节点，其余节点天然成为它的子节点，不会破坏组件的原有功能（比如拖拽、展开收起）
• 数据结构更清晰，维护起来更方便

内容的提问来源于stack exchange，提问作者Felipe Wagner