Javascript 有条件地调用指令

让我先说一句，我是新来的。我现在正在和Angular一起做我的第一个项目，我遇到了一个多天的问题。我正在研究的功能可以用jQuery实现，但我想了解角度的方式

我希望有一组元素在页面上反弹（就像一个旧的屏幕保护程序，我知道这很愚蠢）。我有一个指令可以很好地处理这个问题

cancerApp.directive('ngSlider', function() {
  return {
    scope: true,
    template: "<li class='ng-slider' ng-style='pos'>{{choice}}</li>",
    replace: true,
    controller: function($scope, $interval, $element) {
      $scope.pos = {
        top: 0,
        left: 0.
      };

      $scope.newPos = function() {
      $scope.h = window.innerHeight - 50;
      $scope.w = window.innerWidth - 50;
      $scope.pos.top = (Math.random() * $scope.h) + "px";
      $scope.pos.left = (Math.random() * $scope.w) + "px";
      }

    $interval($scope.newPos, 1000);

    }
  }
});

cancerApp.directive（'ngSlider'，function（）{
返回{
范围：正确，
模板：“
{{choice}
”，
替换：正确，
控制器：函数（$scope、$interval、$element）{
$scope.pos={
排名：0，
左：0。
};
$scope.newPos=函数（）{
$scope.h=window.innerHeight-50；
$scope.w=window.innerWidth-50；
$scope.pos.top=（Math.random（）*$scope.h）+“px”；
$scope.pos.left=（Math.random（）*$scope.w）+“px”；
}
$interval（$scope.newPos，1000）；
}
}
});

我这样称呼这个指令：

<li ng-slider class="choices" ng-click="selected(choice)" ng-repeat="choice in momChoice">
    {{choice}}
</li>

{{choice}}

我的问题是，当用户将鼠标悬停在元素上时，我希望元素停止移动。然后（如果可能）在用户将鼠标悬停在元素之外时再次开始移动

我一直在寻找在线帮助，并尝试了几次。我尝试在指令、控制器以及ng mouseenter和ng mouseleave中调用的函数中添加条件语句，结果不一

---

我觉得我被困在jQuery中思考。我想更好地理解Angular是如何处理这种情况的。非常感谢任何能为我指明正确方向的想法、解决方案或资源

将指令动画代码包装成这样

   $element.on('mouseenter', function() {
       //clearInterval here - stop the animation
   });
   $element.on('mouseleave', function() {
       //start the animation
   });

---

您的准确答案可能如下所示。正如@tpie所说的，这是一个扩展的答案

指令

cancerApp.directive('ngSlider', function() {
  return {
    scope: true,
    template: "<li class='ng-slider' ng-style='pos'>{{choice}}</li>",
    replace: true,
    controller: function($scope, $interval, $element) {
      $scope.pos = {
        top: 0,
        left: 0.
      };

      $scope.newPos = function() {
      $scope.h = window.innerHeight - 50;
      $scope.w = window.innerWidth - 50;
      $scope.pos.top = (Math.random() * $scope.h) + "px";
      $scope.pos.left = (Math.random() * $scope.w) + "px";
      }

      var interval = $interval($scope.newPos, 1000); 
      element.on('mouseenter', function(){
          if(interval)
            $interval.cancel(interval);
      })
      element.on('mouseleave', function(){
          interval = $interval($scope.newPos, 1000);
      })

    }
  }
});

cancerApp.directive（'ngSlider'，function（）{
返回{
范围：正确，
模板：“
{{choice}
”，
替换：正确，
控制器：函数（$scope、$interval、$element）{
$scope.pos={
排名：0，
左：0。
};
$scope.newPos=函数（）{
$scope.h=window.innerHeight-50；
$scope.w=window.innerWidth-50；
$scope.pos.top=（Math.random（）*$scope.h）+“px”；
$scope.pos.left=（Math.random（）*$scope.w）+“px”；
}
var interval=$interval（$scope.newPos，1000）；
on（'mouseenter'，function（）{
如果（间隔）
$interval.cancel（interval）；
})
on（'mouseleave'，function（）{
间隔=$interval（$scope.newPos，1000）；
})
}
}
});

哇，我好几次都离得很近。谢谢你的帮助！我认为我不能调用像cancel（）函数这样简单的函数，所以我尝试切换类并删除attr。再次感谢。@figbomb别忘了接受答案..你可以接受tpie/meaccept的答案b/c关键部分是

if（interval）$interval.cancel（interval）；}谢谢你的帮助！我确实做了那件事，但我不知道如何停止动画。我一直在尝试切换类，删除attr，然后将其添加到另一个鼠标上。我显然把事情弄得太复杂了。