CODEWITHSUNDEEP
javascripthtmlangularjs
Øyvind
Øyvind

Reputation: 139

angularjs bind on mouseenter in directive not working

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.

Upvotes: 1

Views: 3916

Answers (3)

voidmain
voidmain

Reputation: 65

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

Upvotes: 1

LauroSkr
LauroSkr

Reputation: 2169

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.

Upvotes: 2

Joseph Silber
Joseph Silber

Reputation: 219930

Your attribute should be snake cased:

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

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

Upvotes: 5

Related Questions