javascript - 有条件地调用指令

Question

让我先声明一下我是 Angular 的新手。我现在正在使用 Angular 开发我的第一个项目，但遇到了一个持续多天的问题。我正在处理的功能可以用 jQuery 完成，但我想了解 Angular 的方式。

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

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

    }
  }
});

我这样调用指令:

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

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

我一直在寻找在线帮助并进行了多次尝试。我已经尝试在指令、 Controller 以及在 ng-mouseenter 和 ng-mouseleave 中调用的函数中添加条件语句，结果混合。

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

Answer 1

您的确切可能如下所示。正如@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);
      })

    }
  }
});