Question

我有一个Angular treeview指令，我正在研究它并不包含jQuery。我使用TweenMax打开和关闭树的分支。看起来TweenMax只适用于id＆＃39; s。我现在只能使用id＆＃34; list＆＃34;打开和关闭顶部分支。我有多个分支我需要定位，我没有jQuery来帮助类。有没有解决这个问题？以下是CodePen.io

中我的代码的链接

这是指令：

var tree = angular.module('treeview',[]);

tree.directive('treeView',function(){
return{
    restrict: 'AE',

    link:function (scope,elem,attrs){

        var list = TweenMax.from("#list",0.5,{height:0,paused:true,reversed:true});

            function toggle(){
                // e.preventDefault();
                if (list.reversed()) {
                    list.play();
                  } else {
                    list.reverse();
                  }

            }

        elem.on('click',function(e){


            toggle();


            e.stopPropagation();
        });

    }
}
});

Answer 1

您可以将HTML元素传递给TweenMax.from函数以及选择器（请参阅documentation）。另请注意，angular包含一个名为jQuery lite的jQuery的剥离版本，您可以使用它来包装元素并在其上运行有限的jQuery函数子集（documentation）。

可能有一种更简洁的方法，但您可以通过应用上述技术（更新CodePen）来完成您尝试做的事情：

var tree = angular.module('treeview',[]);
tree.directive('treeView',function(){
    return{
        restrict: 'AE',
        link:function (scope,elem,attrs){

            // Use jQuery lite to access the first child of the scoped element
            var ul = angular.element(elem).children(0);
            var list = TweenMax.from(ul,0.5,{height:0,paused:true,reversed:true});

            function toggle(){
                if (list.reversed()) {
                    list.play();
                  } else {
                    list.reverse();
                  }  
            }

            elem.on('click',function(e){
                toggle();
                e.stopPropagation();
            });
        }
    }
});

在多个元素上使用TweenMax

1 个答案: