将 jQuery 树视图转换为 AngularJS

Question

我有这个 jQuery 函数，我正在尝试将其转换为 AngularJS。该函数将嵌套列表转换为树视图结构。我已经查看了几个完全在控制器或指令中创建树的示例。我已经有一个要转换为树结构的 HTML 结构。我希望树能够随着更多 HTML 元素的添加而扩展。此外，该函数可以没有 jQuery 依赖项。这可以在每个列表元素中没有类或指令的情况下完成吗？这是jQuery函数：

$(function() {
$('.tree li ul li').hide();
$('.tree ul li:first').show();
$('.tree li').on('click', function(e) {
    if ($(this).find('> ul > li').is(':visible')) {
        $(this).find('> ul > li').hide('fast');
    } else {
        $(this).find('> ul > li').show('fast');
    }
    e.stopPropagation();
   });
});

$('li').on('click', function() {
    $(this).toggleClass('minus');
});

这里是 HTML：

<ul class="tree">
<li >List 1
    <ul >
        <li>element 1</li>
        <li>element 2</li>
        <li>element 3</li>
        <li>sub-list 1
            <ul >
                <li>sub-element 1</li>
                <li>sub-element 2</li>
                <li>sub-element 3</li>
                <li>sub-element 4</li>
                <li>sub-element 5</li>
            </ul>
        </li>
        <li>element 4</li>
        <li>element 5</li>
    </ul>
</li>
<li >List 2
    <ul >
        <li>element 1</li>
        <li>element 2</li>
        <li>element 3</li>
        <li>element 4</li>
        <li>element 5</li>
    </ul>
</li>

这是我到目前为止所拥有的，我承认并不多：

tree.directive('treeView',function(){
return{
    restrict: 'AE',
    replace: 'true',
    link:function(scope,elem,attrs){
        elem.bind('click',function(){
            elem.children().hide();
        });
    }
  }
});

我知道 Angular 的方式不是针对 DOM 元素，这就是为什么我在理解如何前进时遇到问题。提前感谢您的帮助。

Answer 1

感觉很脏 :-) 这里没有数据，只有 DOM 元素，不知道这个有多大用处。

这将为您提供展开折叠行为

css:

div.treeview li.collapsed ul {
    display: none;
}

js:

angular.module('treetestApp')
    .directive('treeView', function () {
        return {
            template: '<div class="treeview" ng-transclude></div>',
            restrict: 'E',
            replace: true,
            transclude: true,
            link: function postLink(scope, element, attrs) {
                element.bind('click', function (e) {
                    if (e.target.tagName === "LI" && e.target.childElementCount) {
                        $(e.target).toggleClass('collapsed');
                    }
                })
            }
        };
    });