CODEWITHSUNDEEP
angularjsangularjs-directive
Manoj
Manoj

Reputation: 5097

Angular directive does not work if we change name

I am seeing a strange behaviour when using angular directive.

In the code below

HTML

<body ng-app="loadTweetsModule">
    <div tweets> Load </div>
    <div loadTweets> loadTweets </div>
</body>

Javascript

var loadTweetsModule = angular.module("loadTweetsModule",[]);


loadTweetsModule.directive('tweets',function(){
    return {
        link : function(scope,element){
            element.bind("mouseenter", function(){
                console.log("tweets");
            });
        }
    };
});

loadTweetsModule.directive('loadTweets',function(){
    return {
        link : function(scope,element){
            element.bind("mouseenter", function(){
                console.log("loadTweets");
            });
        }
    };
});

JSFiddle Link

The two directive loadTweets and tweets are the same except for the name. The directive tweets works as expected but loadTweets does not work. I am not able to find out the reason for this behaviour. Can somebody explain this?

Upvotes: 0

Views: 94

Answers (1)

user2680139
user2680139

Reputation:

if you write in js loadTweets you should write in html load-tweets

from http://docs.angularjs.org/guide/directive

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

Related Questions