Question

我正在尝试设置一些按钮的动画，我不明白，为什么隔离范围不起作用。这是一个小提琴：

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

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

我希望你能帮助我。

Answer 1

这不是范围问题，您只是使用HTMLCollection元素初始化TimelineLite对象，然后对所有元素运行动画。而是在鼠标悬停上选择必要的元素，如下所示：

.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/

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

Answer 2

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

我假设这个TimelineLite对象可以同时将自己初始化为多个元素，所以当你写：

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

$a1包含两个匹配的元素，因此t1将表示两者的集合，使t1.play()影响两者。

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

2 个答案: