Javascript 在mousemove angularjs上运行函数_Javascript_Angularjs_Angularjs Scope

Javascript 在mousemove angularjs上运行函数

javascript angularjs

Javascript 在mousemove angularjs上运行函数,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我想在angularjs中的mousemove上创建动画。我找到了榜样但我想运行函数。所以体内 <body data-ng-mousemove="squareRotate()"> 但是我不能让它工作。我如何管理它而不将其放入控制器中？既然您没有发布完整的代码，人们只能猜测。我猜要么你身体的位置很小，所以你没有在身体上移动，要么angularjs应用程序和控制器没有正确初始化为了给html和正文留出足够的空间，请使用以下命令： html, body { width:

我想在angularjs中的mousemove上创建动画。我找到了榜样

但我想运行函数。所以体内

<body data-ng-mousemove="squareRotate()">

但是我不能让它工作。我如何管理它而不将其放入控制器中？

既然您没有发布完整的代码，人们只能猜测。我猜要么你身体的位置很小，所以你没有在身体上移动，要么angularjs应用程序和控制器没有正确初始化

为了给html和正文留出足够的空间，请使用以下命令：

html, body {
    width: 100%;
    height: 100%;
}

我用小提琴制作了一个工作演示。唯一的区别是，我不使用警报，而是使用计数器，当您将鼠标移到字段上时，计数器会增加

testApp.directive('testDir', function () {
    return function (scope, element) {
        var el = element[0];

        el.addEventListener(
            'mousemove',
            function () {
                alert('test');
            },
            false
        );
    }
});

你可以在这里试试：

如果您的意思不同，请进一步说明

使用指令：

我更新了示例以使用指令。该指令绑定到body标记，并在“mousemove”上使用eventListener。如果您将鼠标移动到fiddle中的“结果”窗口上，您将看到警报窗口

请看这里：

HTML:

您在哪里声明您的data ng应用程序？如果你把它放在身体里，它应该能工作。有可能在没有控制器的情况下运行这个功能吗？。我想在鼠标移动时设置一个元素的动画。所以我必须创建控制器并包装所有主体标记，或者我可以放入全局$scope并运行它吗？如果使用angularjs，则需要在控制器（）或指令（）中定义此函数。如果您不想使用控制器，为什么要使用angularjs？好的，我将尝试指令thanI更新答案，以显示如何使用指令。如果答案对你的问题有帮助，请接受！作为补充：$event对象将在squareRotate（）中可用以指示坐标。

testApp.directive('testDir', function () {
    return function (scope, element) {
        var el = element[0];

        el.addEventListener(
            'mousemove',
            function () {
                alert('test');
            },
            false
        );
    }
});

<!DOCTYPE html>
<html ng-app="plunker">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-semver="1.2.19"></script>
        <script src="app.js"></script>
    </head>

    <body ng-controller="MainCtrl" data-ng-mousemove="squareRotate()">
        <p>Hello {{name}}!</p>
    </body>
</html>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.squareRotate = function(){
  alert();
};
});