Angularjs isolate scope, what am I missing?
I'm trying to animate some buttons and I don't understand why the selection area is not working. Here's the fiddle:
Fiddle
https://jsfiddle.net/gLhveeor/4/
The mouse center should only trigger a specific animation, not all ng-repeat elements.
Hope you can help me.
source to share
This is not TimelineLite
a scoping issue, you just initialize the object with an HTMLCollection of items and then animate all of them. Instead, select the desired item on hover like so:
.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 the event object to the handler:
<div my-directive class="foo" ng-mouseenter="play($event)">
Demo: https://jsfiddle.net/gLhveeor/5/
However, the advice I can give you is to move this login into a directive as theirs in the controller is not the best idea.
source to share
In your ng-repeat, you are assigning the same class ( foo-2
) to both elements, so it
angular.element(document.getElementsByClassName('foo-2'));
matches 2 elements.
I assume that this TimelineLite object can be initialized to multiple elements at once, so when you write:
tl.to($a1, 0.4, {x: 30});
$a1
contains both matched elements, so t1
would mean their combination, making t1.play()
affect both.
source to share