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

Question

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

与许多其他开发人员一样，我已经习惯了 jQuery 很多年，因为我已经使用它很多年了。现在我不比较 jQuery 和 AngularJS 因为我知道他们应该做自己的事情 - AngularJS 是一个框架，而 jQuery 是一个库所以它是就像把 table 比作一把椅子。

但我只想知道在 AngularJS 中操纵或 select 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 中，我会使用 select 或者像这样：

$('.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 操作限制在指令的 link 函数中。

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

DOM Manipulation and selection using jQuery or AngularJS?

javascript

jquery

angularjs

angularjs-directive

dom-manipulation