Управление DOM и выбор с использованием jQuery или AngularJS?

Я начал использовать AngularJS некоторое время назад. Мне это нравится — это очень полезный и мощный фреймворк, и я уже создал пару веб-приложений. Очень мало кода, очень эффективный, простой для понимания, мощная функциональность... все отлично!

Как и многие другие разработчики, я привык к jQuery, так как работаю с ним уже много лет. Сейчас я не сравниваю jQuery с AngularJS, потому что понимаю, что они должны делать свои собственные вещи: AngularJS — это фреймворк, тогда как jQuery — это библиотека, так что это все равно, что сравнивать стол со стулом.

Но я просто хочу знать, будет ли правильный способ манипулировать или выбирать DOM в AngularJS? Я приведу вам пример.

Допустим, у меня есть следующий 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, я решил использовать директиву и прикрепить ее к div .container. что-то вроде этого:

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>

Будет ли это правильным подходом?

Что, если бы я захотел создать отдельные анимации для каждого элемента внутри div .container? В 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);
        }
    }
})

По сути, я пытаюсь спросить: это плохой подход к использованию jQuery внутри директив и контроллеров AngularJS в целом?


javascript jquery angularjs angularjs-directive dom-manipulation
person Bravi    schedule 15.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В вашем примере вы можете избежать 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 функцией ссылки вашей директивы.

person pixelbits    schedule 15.01.2015
comment
Спасибо. Вот что я хотел узнать :) - person Bravi; 16.01.2015