AngularJS directive not working

Question

Below is the directive I wrote,

angular.module('netVogue.directives', []). directive('set-First-Active', function() { return function(scope, element, attrs){ alert('sample'); element.addClass("active"); }; }); 

I have added this directive to my module below,

 angular.module('netVogue', ['netVogue.filters', 'netVogue.services', 'netVogue.directives']); 

I used this directive in my template in the following format,

 <div class="item" ng-repeat="viewPrintcampaign in viewPrintcampaigns" ng-init="first=$first" set-First-Active> </div> 

However, I do not see any response to the warning, and the class is not added. Can someone please help me with this? Due to some dependency, I don't want to use 'ng-class', but I want to add class = 'active' for the first ng-repeat element.

Any help would be greatly appreciated. Thanks in advance.

Answer 1

When declaring a directive, there must be a camel case name ( setFirstActive ).

See the developer guide for directives .

The directives have camel names such as 'ngBind'. The directive can be invoked by translating the name of a camel case into a snake case with these special characters :, -, or _. If desired, the directive can be prefixed with x- or data- to make it compatible with the HTML validator. The following is a list of some possible directive names: ng: bind, ng-bind, ng_bind, x-ng-bind and data-ng-bind.