1

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.

4
  • you omitted several semicolons? console.log("enter"); being one. What does the log say? Commented Aug 28, 2013 at 21:53
  • @JeroenIngelbrecht - Semi-colons in JavaScript are not explicitly required; ASI takes care of that. 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) 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 Commented Aug 28, 2013 at 21:57

3 Answers 3

5

Your attribute should be snake cased:

<div test-dir>test here</div>
<!--     ^^               -->

Here's a demo: http://plnkr.co/edit/bobVjZHSJ313ZLoXyKfB?p=preview

Sign up to request clarification or add additional context in comments.

2 Comments

@JeroenIngelbrecht - How not? Did you check the console after mousing over the element?
@JeroenIngelbrecht - If there's some issue in your browser with Plunkr, check out this fiddle instead.
2

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 compliant. Here is a list of some of the possible directive names: ng:bind, ng-bind, ng_bind, x-ng-bind and data-ng-bind.

Comments

1

HTML is case-insensitive. In order to normalize it we need to use dash-delimited attributes.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.