Question

我刚开始使用AngularJS。我喜欢它 - 它是一个非常有用和强大的框架，我已经构建了几个网络应用程序。非常少的代码，非常有效，易于理解，功能强大......它太棒了！

和许多其他开发人员一样，我已经习惯了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操作限制为指令的链接函数。

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

1 个答案: