angular-treeRepeat, AngularJS的递归转发器

分享于 

4分钟阅读

GitHub

 
Recursive repeater for AngularJS
  • 源代码名称:angular-treeRepeat
  • 源代码网址:http://www.github.com/tchatel/angular-treeRepeat
  • angular-treeRepeat源代码文档
  • angular-treeRepeat源代码下载
  • Git URL:
    git://www.github.com/tchatel/angular-treeRepeat.git
    Git Clone代码到本地:
    git clone http://www.github.com/tchatel/angular-treeRepeat
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/tchatel/angular-treeRepeat
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    用于AngularJS的递归转发器

    或者如何手工生成树

    演示在这里:http://tchatel.github.io/angular-treeRepeat/

    这个 frangTreeRepeat 指令来自 ngRepeat,用于对分层数据结构中的HTML元素执行递归重复。

    然而,这种思想不是拥有一个独立的完整树组件,而是一个低级递归中继器,允许构建带有任意模板的树和任何数据结构类型。 当然,任何使用这些低级指令构建的树都可以在一个准备好使用指令的情况下打包。

    有 5个指令:

    • frangTree,只发布控制器;它必须在包含它的他指令的元素上设置
    • frangTreeRepeat,与 ngRepeat 完全相同
    • frangTreeInsertChildren,用一个of表达式计算子节点的集合,用于下一级重复级别
      • frangTreeRepeat 指令相同的HTML元素对子节点重复
      • 所有重复元素都用 frangTreeInsertChildren 指令插入到那个元素中
    • frangTreeDrag,将元素标记为可以拖动
      • 它采用一个表达式,在拖动的node 上计算,它将被引用为 frang-tree-drop 表达式中的$drag
    • frangTreeDrop,用于标记拖放目标
      • 它接受一个将作为操作计算的表达式,其中 $drag 引用 frang-tree-drag 表达式的值
      • 它还采用一个 frang-tree-allow-drop 属性,表达式检查目标 node 是否允许在这里处删除;如果不存在,则允许删除。

    示例模板,在单击 node 时执行操作:

    <ulfrang-tree>
     <lifrang-tree-repeat="node in treeData">
     <div><spanclass="icon"ng-class="{collapsed: node.collapsed, expanded:!node.collapsed}"ng-show="node.children && node.children.length> 0"ng-click="node.collapsed =!node.collapsed"></span>
     <spanclass="label"ng-class="{folder: node.children && node.children.length> 0}"ng-bind="node.label"ng-click="action(node)"></span>
     </div>
     <ulng-if="!node.collapsed && node.children && node.children.length> 0"frang-tree-insert-children="node.children"></ul>
     </li>
    </ul>

    示例模板,带有拖放支持:

    <ulfrang-tree>
     <lifrang-tree-repeat="node in treeData"frang-tree-drag="{node: node, parent: $parent.node}"frang-tree-drop="drop(node, dragData.node, dragData.parent)"frang-tree-allow-drop="node.label.substring(0, 6) == 'Folder'">
     <div><spanclass="icon"ng-class="{collapsed: node.collapsed, expanded:!node.collapsed}"ng-show="node.children && node.children.length> 0"ng-click="node.collapsed =!node.collapsed"></span>
     <spanclass="label"ng-class="{folder: node.children && node.children.length> 0}"ng-bind="node.label"> </span>
     </div>
     <ulng-if="!node.collapsed && node.children && node.children.length> 0"frang-tree-insert-children="node.children"></ul>
     </li>
    </ul>

    rep  angular  recursive  
    相关文章