AngularJS $animate in Directive

אחת הטעויות הנפוצות בכתיבת directive היא לא להשתמש ב-$animate. אתם שואלים למה להשתמש בזה עם אתם לא חושבים על אנימציה? התשובה ש-$animate כל מה שהוא עושה זה:

1.     Enter  – להוסיף איבר ל-DOM

2.     Leave – להוריד איבר מ-DOM

3.     Move – להזיז איבר קיים ב-DOM למקום אחר, כלומר שיהיה לו אבא אחר.

4.     addClass ו- removeClass השם אומר הכל.

 

במילים פשוטות $animate מוגדר בקובץ angular.js ושם הוא רק עושה את הפעולות 1-4. כאשר מוסיפים את הקובץ angular-animate.js ומגדירים תלות במודול ngAnimate, המודול ngAnimate מבצע Decorator על $animate ומגדיר מחדש את הפעולות 1-4.

 

לדוגמא פעולת enter איך שהיא מוגדרת בקובץ angular.js:

 

function enter (element, parent, after, done) {

    if (after) {

        after.after(element);

    } else {

        if (!parent || !parent[0]) {

            parent = after.parent();

        }

        parent.append(element);

    }

    async(done);

}

 

מה שאנחנו רואים בקוד שמתודה enter עושה פעולה פשוטה של jQuery ( append() או after() תלוי בארגומנטים ) ולכן שאתם כותבים directive ואתם במתודה של ה-linkמבצעים את הפעולות האלו על element עדיף שתשתמשו $animate כך אם תרצו בעתיד תכלו לקבל תמיכה באנימציה. ( ממליץ בחום להסתכל בקוד של אנגולר על כל המתודות, leave, move, addClass ו- removeClass.

עכשיו נראה את ההגדרה החדשה של enter, כאשר מוסיפים את ngAnimate:

 

$provide.decorator('$animate', function ($delegate,
$injector, $sniffer, $rootElement, $timeout, $rootScope, $document) {

 

    //…

 

    return {       

        enter: function (element, parent, after, doneCB) {

            this.enabled(false, element);

            $delegate.enter(element, parent, after);

            $rootScope.$$postDigest(function () {

                performAnimation('enter', 'ng-enter', element, parent, after, noop, doneCB);

            });

        }

        // …

    };

});

הסברים:

1.     ngAnimate מבצע Decorator על השרות $animate ולכן ה-directives שלכם עכשיו מקבלים את $animate החדש. הסברים נוספים על Decorator אתם יכולים למצוא בפוסט הקודם שלי .

2.      delegate.enter(element, parent, after) מפעיל את $animate המקורי.

3.     המתודה performAnimation היא למעשה עושה את האנימציה. הסברים איך המתודה מבצעת את האנימציה בפוסט אחר.

 

סיכום:

עדיף להשתמש ב-$animate בפונקצית ה-link בכל מקום שאפשר במקום לעשות ישירות פעולות על ה-DOM כי כך אנחנו נקבל תמיכה באנימציה אם נרצה והדבר לא פוגע בביצועים.