使用jQuery或AngularJS进行DOM操作和选择？

Question

我前一段时间开始使用AngularJS。 我喜欢它-这是一个非常有用且功能强大的框架，并且我已经构建了几个Web应用程序。 很少的代码，非常有效，易于理解，强大的功能..太好了！

与许多其他开发人员一样，多年来我一直习惯使用jQuery。 现在，我不再将jQuery与AngularJS进行比较，因为我了解它们应该做自己的事情-AngularJS是一个框架，而jQuery是一个库，因此就像将桌子和椅子进行比较。

但是我只想知道在AngularJS中操作或选择DOM的正确方法是什么？ 我举一个例子。

假设我有以下HTML：

<div class="container">
  <h1>Hello world</h1>
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ul>
</div>

假设我正在使用TimelineLite为文档加载中的每个元素设置动画。 在jQuery中，我将具有以下内容：

var tl = new TimelineLite();
tl.staggerFrom($('.container').children(),1,{opacity:0},0.5);

现在在AngularJS中做同样的事情，我想我会使用一个指令，并将其附加到.container div。 像这样的东西：

app.directive('beautifulLoad',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
            var tl = new TimelineLite();                
            var elms = element.children();
            tl.staggerFrom(elms,2,{opacity:0},0.25);
        }
    }
})

<div class="container" beautiful-load>

这是正确的方法吗？

如果我想为.container div中的每个元素创建单独的动画怎么办？ 在jQuery中，我将使用如下选择器：

$('.container h1')

但是我不能在angularJS中做同样的事情吗？ 因此，我不能使用以下指令吗？

app.directive('beautifulLoad',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
            var tl = new TimelineLite();                
            tl.staggerFrom($(element).find('h1'),2,{opacity:0},0.25);
        }
    }
})

基本上我想问的是-通常在AngularJS指令和控制器中使用jQuery是一种不好的方法吗？

Answer 1

在您的示例中，可以避免使用jQuery：

app.directive('beautifulLoad',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
            var tl = new TimelineLite();                
            tl.staggerFrom(element.find('h1'),2,{opacity:0},0.25);
        }
    }
})

如果可以避免使用jQuery，则应该这样做。 使用AngularJS时，很少真正需要它，通常还有其他更好的方法可以使用jQLite或普通的旧javascript来完成相同的事情。 您还应该将DOM操作限制为指令的链接函数。