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');
                    }
                })
            }
        };
    });

将jQuery树视图转换为AngularJS

1 个答案: