Angularjs隔離范圍，我錯過了什么？

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()影響兩者。