Question

我想在angularjs中的mousemove上创建动画。我找到了例子 https://docs.angularjs.org/api/ng/directive/ngMousemove

但我想运行功能。所以身体内部

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

和js：

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

但是我不能让它发挥作用。如何在不将其置于控制器内的情况下进行管理？

Answer 1

由于您没有发布完整的代码，因此只能猜测。我猜你的身体的位置真的很小，所以你并没有真正移动身体，或者angularjs应用程序和控制器没有正确初始化。

为了给html和body提供足够的空间，请使用以下命令：

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

您可以在此处尝试：http://jsfiddle.net/AfNH9/4/

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

使用指令：

我更新示例以使用指令。该指令绑定到body标签，并在“mousemove”上使用eventListener。如果将鼠标移到小提琴的“结果”窗口上，您将看到警告窗口。 http://jsfiddle.net/AfNH9/6/

Answer 2

请参见此处：http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

HTML：

<!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>

JS：

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

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

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

在mousemove angularjs上运行函数

2 个答案: