Question

我有一个指令，为CSS动画添加一个类，然后删除所述类。问题是指令在加载时执行动画。动画应该只在按钮点击时发生。如何阻止动画在页面加载时启动？

指令：

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

AngularJS：在指令中阻止页面加载时的addClass

1 个答案: