I want create animation on mousemove in angularjs. I found example
but i want to run function. So inside of body
<body data-ng-mousemove="squareRotate()">
And js:
$scope.squareRotate = function(){
alert();
};
but i cant make it work. How can i manage it without puting it inside of controller ?
I want create animation on mousemove in angularjs. I found example https://docs.angularjs/api/ng/directive/ngMousemove
but i want to run function. So inside of body
<body data-ng-mousemove="squareRotate()">
And js:
$scope.squareRotate = function(){
alert();
};
but i cant make it work. How can i manage it without puting it inside of controller ?
Share Improve this question asked Jul 20, 2014 at 14:01 user2217288user2217288 5472 gold badges14 silver badges30 bronze badges 1- where are you declaring your data-ng-app? if you put it in the body, it should work. – airnan Commented Jul 20, 2014 at 14:15
2 Answers
Reset to default 2Since you didn't post your plete code, one can only guess. I am guessing that either the place of your body is really small, so you don't really move the move over the body, or angularjs application and controller are not properly initialised.
In order to give the html and body enough room, use the following:
html, body {
width: 100%;
height: 100%;
}
I created a working demo in fiddle. The only difference is that I don't use alerts, but a counter, which increases, when you move your mouse over the field.
testApp.directive('testDir', function () {
return function (scope, element) {
var el = element[0];
el.addEventListener(
'mousemove',
function () {
alert('test');
},
false
);
}
});
You may try it here: http://jsfiddle/AfNH9/4/
If you meant something different, please specify further.
Use directive:
I update the example to use a directive. The directive is bound to the body tag and uses an eventListener on "mousemove". If you move the mouse over the "Result" window in fiddle, you will see the alert window. http://jsfiddle/AfNH9/6/
Please see here : 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="[email protected]" src="https://ajax.googleapis./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();
};
});