AngularJS : 지시문의 페이지로드시 addClass 방지

Question

CSS 애니메이션에 대한 클래스를 추가 한 지시문이 있으며 해당 클래스가 제거됩니다. 문제는 지시문이 애니메이션을로드 할 때 실행된다는 것입니다. 애니메이션은 버튼 클릭에서만 발생합니다. 페이지로드시 애니메이션이 시작되지 않게하려면 어떻게합니까?

JSBIN

지침 :

app.directive('spinMe', function() { 
    return function(scope, elem, attrs) { 
    scope.$watch(attrs.spinMe, function() { 
     elem.addClass('spin'); 
     setTimeout(function() { 
     elem.removeClass('spin'); 
     }, 500); 
    }); 
    }; 
}); 

컨트롤러 :

function MyCtrl($scope) { 
    $scope.toggleSpin = false; 
} 

HTML : 초기화에

<a href="" ng-click="toggleSpin = !toggleSpin">Start spin</a> 
<div spin-me="toggleSpin">Spin me!</div> 

Answer 1

- 된 newval == 인 oldval == null를 돌려줍니다.
변경하지 않고 시계를 실행하지 못하도록합니다.

scope.$watch(attrs.spinMe, function(newVal,oldVal) { 
if (newVal === oldVal) return; //first check for change