Question

我正在尝试在指令中使用css样式，样式即将到来但是当我点击按钮时它不会连续出现。例如，我有一个按钮和一个CSS样式（弹跳样式），我也有一个指令。如果我多次点击那个按钮，弹跳式也必须连续出现，但我并没有持续的风格。我也使用了$ watch，只有风格来了。

<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');

    }
  });*/


  }

}; });

这是我的plunker

你能解决我的问题吗？

提前致谢！

Answer 1

执行 moveMe 功能后，您需要删除 bounce 类。可以使用回调函数。

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

css样式只在指令中追加一次，当我们点击按钮时我想要连续的样式

1 个答案: