Часы не стреляют во второй раз, когда область изменяется в директиве

Question

Я анимирую спрайт в директиве и имею переменную области видимости scope.isAnimating, на которую смотрят. Когда щелчок нажимается, значение инвертируется, и анимация останавливается/запускается. Часы срабатывают при первом нажатии элемента, а значение изменяется, но не во второй раз.

Это НЕ полная директива, а сокращенная версия. Если вы хотите, чтобы это произошло live, нажмите на спрайт, чтобы остановить, а затем щелкните его еще раз, чтобы начать (не будет работать).

app.directive('sticker', function(timeFunctions){ 
return { 
    restrict: 'AE', 
    replace: true, 

scope: { 
    isAnimated: '=isanimated', 
    Animation: '=animation', 
    speed: '=speed' 
}, 

template: '<div></div>', 
link: function(scope, element, attrs) { 

    scope.$watch('isAnimated', function(isAnimated) { 
    // fires on the first click but not the second, breakpoint not hit 
     if (scope.isAnimated) { 
      startAnimation(); 
     } else { 
     timeFunctions.$clearInterval(scope.animateTimeout); 
     } 
    }); 

    element.bind('click', function(e) { 
     e.preventDefault(); 
     scope.isAnimated = !scope.isAnimated; 
    }); 


    } 
} 
}); 

Как заставить часы работать на оба клика?

Answer 1

Необходимо применить модификацию свойств области с помощью $ scope. $ Apply function. В настоящее время он не работает, поскольку вы изменяете область действия из пользовательского обратного вызова, вне угловой.

element.bind('click', function(e) { 
    e.preventDefault(); 
    $scope.$apply(function() { 
     scope.isAnimated = !scope.isAnimated; 
    }); 
}); 

Однако я бы рекомендовал вам использовать директиву ng-click вместо привязки вручную к событию. В этом случае вам не нужно будет сворачивать ваш код с помощью $ scope. $ Apply. Угловое будет делать это для вас внутри ng-click.