Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS directive is not working

Please find below the directive which 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 in below way,

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

I used this directive in my template in following format,

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

However, i neither see any response of alert nor class is getting added. Can someone please help me with this? Due to some dependency, i don't want to use 'ng-class' but want to add class='active' for the first element of ng-repeat.

Any help would be greatly appreciated. Thanks in advance.

like image 560
Abdul Azeez Avatar asked Aug 13 '12 11:08

Abdul Azeez


People also ask

How AngularJS directive works?

AngularJS directives are extended HTML attributes with the prefix ng- . The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

What is attrs in AngularJS?

scope is an AngularJS scope object. element is the jqLite-wrapped element that this directive matches. attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.

What is ng for in Angular?

"ng" stands for Next Generation, as Angular is the next generation of HTML .


1 Answers

When declaring directive should has camel case name (setFirstActive).

See developer guide on directives.

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.

like image 150
Artem Andreev Avatar answered Oct 21 '22 05:10

Artem Andreev