Midhunsai Midhunsai - 4 months ago 8
CSS Question

css style is appending only once in directive, i want the style continuously when we clicks button

I am trying to use css style in directive, the style is coming but it is not coming continuously when I am clicking the button.
For example, I have a button and a css style(bouncing style) and also I am having a directive.
If I click that button many times that bouncing style also have to come continuously , but I am not getting the style continuously.
I also used $

watch
in that also only once the style is coming.

<div class="row">
<button class="btn btn-primary" ng-click="qty=qty-1">-</button>
<span my-directive="qty" class="box " ng-bind="qty">{{qty}}</span>
<button id="target" class="btn btn-primary" ng-click="qty=qty+1">+</button>




angular.module('docsSimpleDirective', []).controller('Controller', ['$scope', function($scope) {
$scope.qty =1; }]).directive('myDirective', function() {
return {
restrict:'A',
link:function(scope,elem,attr){
var btn = document.getElementById('target');
btn.addEventListener('click', moveMe);

function moveMe() {
console.log("coming to move");
elem.addClass('bounce');
}

/* scope.$watch(attr.myDirective, function (newValue, oldValue) {
if (newValue !== oldValue) {
console.log("$watch");
console.log(newValue, oldValue);
elem.addClass('bounce');

}
});*/


}

}; });


Here is my plunker

Can you please solve my problem?

Thanks in advance!

Answer

You need to remove class bounce after execution of moveMe function. Can use callback function.

function moveMe() {
   console.log("coming to move");
   elem.addClass('bounce');
   setTimeout(function() {
      elem.removeClass('bounce');
   }, 1000);
}