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>

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

我寻找在线帮助并做了几次尝试。我已经尝试在指令，控制器和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);
      })

    }
  }
});

Answer 2

将指令动画代码包装在这样的

中

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

有条件地调用指令

2 个答案: