I can't get the directiv i angular to bind on mouseenter, i have tried in a simple example, what is wrong here?
<html lang="en" >
<head>
<title>My AngularJS test</title>
<script src="angular.js"></script>
</head>
<body >
<div ng-app="testApp" ng-controller="testCtr">
<div testDir>test here</div>
<!-- just testing to see if the app is working -->
{{test}}
<script type="text/javascript">
var app = angular.module("testApp", []);
app.directive("testDir", function(){
return {
link: function(scope, element, attrs){
element.bind("mouseenter", function(){
console.log("enter")
})
}
}
})
app.controller("testCtr", function($scope) {
$scope.test = 500;
})
</script>
</div>
</body>
</html>
IT is probably a stupid mistake, but i can't see it.
I can't get the directiv i angular to bind on mouseenter, i have tried in a simple example, what is wrong here?
<html lang="en" >
<head>
<title>My AngularJS test</title>
<script src="angular.js"></script>
</head>
<body >
<div ng-app="testApp" ng-controller="testCtr">
<div testDir>test here</div>
<!-- just testing to see if the app is working -->
{{test}}
<script type="text/javascript">
var app = angular.module("testApp", []);
app.directive("testDir", function(){
return {
link: function(scope, element, attrs){
element.bind("mouseenter", function(){
console.log("enter")
})
}
}
})
app.controller("testCtr", function($scope) {
$scope.test = 500;
})
</script>
</div>
</body>
</html>
IT is probably a stupid mistake, but i can't see it.
Share Improve this question edited Aug 28, 2013 at 21:50 Joseph Silber 220k59 gold badges368 silver badges292 bronze badges asked Aug 28, 2013 at 21:40 ØyvindØyvind 1392 silver badges9 bronze badges 4-
you omitted several semicolons?
console.log("enter");being one. What does the log say? – Jeroen Ingelbrecht Commented Aug 28, 2013 at 21:53 - @JeroenIngelbrecht - Semi-colons in JavaScript are not explicitly required; ASI takes care of that. – Joseph Silber Commented Aug 28, 2013 at 21:54
- ah, thanks so any warnings about that can be ignored then, unless you want to keep it clean and according to standards? (actually a genuine question without any sarcasm) – Jeroen Ingelbrecht Commented Aug 28, 2013 at 21:56
- 1 @JeroenIngelbrecht - Technically yes, but people get very opinionated about it. Check out this article: The Dangers of JavaScript’s Automatic Semicolon Insertion – Joseph Silber Commented Aug 28, 2013 at 21:57
3 Answers
Reset to default 5Your attribute should be snake cased:
<div test-dir>test here</div>
<!-- ^^ -->
Here's a demo: http://plnkr.co/edit/bobVjZHSJ313ZLoXyKfB?p=preview
Joseph Silber said everything right ,code is working,see your console! here is more info about it
Directives have camel cased names such as 'ngBind'. The directive can be invoked by translating the camel case name into snake case with these special characters :, -, or _. Optionally the directive can be prefixed with x-, or data- to make it HTML validator pliant. Here is a list of some of the possible directive names: ng:bind, ng-bind, ng_bind, x-ng-bind and data-ng-bind.
HTML is case-insensitive. In order to normalize it we need to use dash-delimited attributes.