Search code examples
javascriptangularjsgsap

Angularjs isolate scope, what am I missing?

I'm trying to animate some buttons and I don't get it, why the isolate scope is not working. Here's a fiddle:

Fiddle https://jsfiddle.net/gLhveeor/4/

The mouseenter should only trigger the particular animation and not all of the ng-repeat items.

I hope you can help me out.

Solution

  • It's not scope issue, you are just initializing TimelineLite object with HTMLCollection of elements and then run animation on all of them. Instead select necessary element on mouseover like this:

    .controller('myCtrl', function ($timeout, $scope) {
    $timeout(function () {

        var tl = new TimelineLite();
        tl.stop();

        $scope.play = function ($event) {
            var target = $event.target.querySelector('.foo-2');
            tl.to(target, 0.4, {x: 30});
            tl.play();
        };
    }, 0);
});

    where in HTML you pass event object into handler:

    <div my-directive class="foo" ng-mouseenter="play($event)">

    Demo: https://jsfiddle.net/gLhveeor/5/

    However advice I can give you is to move this login into directive, having them in controller is not the best idea.