Angularjs 隔离范围，我错过了什么？

Question

我正在尝试为一些按钮设置动画但我不明白，为什么隔离范围不起作用。这是 fiddle:

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

mouseenter 应该只触发特定的动画，而不是所有的 ng-repeat 项目。

希望你能帮帮我。

Answer 1

在你的 ng-repeat 中，你为两个元素分配了相同的 class (foo-2)，所以 angular.element(document.getElementsByClassName('foo-2')); 匹配 2 个元素。

我假设这个 TimelineLite 对象可以一次将自己初始化到多个元素上，所以当你写：

tl.to($a1, 0.4, {x: 30});

$a1 包含两个匹配的元素，因此 t1 将意味着它们的集合，使得 t1.play() 影响两者。

Answer 2

这不是范围问题，您只是用 HTML 元素集合初始化 TimelineLite 对象，然后在所有元素上设置运行动画。取而代之的是 select 鼠标悬停时的必要元素，如下所示：

.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);
});

在 HTML 中将事件对象传递给处理程序的位置：

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

演示： https://jsfiddle.net/gLhveeor/5/

但是我可以给你的建议是将此登录移动到指令中，将它们放在控制器中并不是最好的主意。

Angularjs 隔离范围，我错过了什么？

Angularjs isolate scope, what am I missing?

javascript

angularjs

gsap