WildDev WildDev - 1 year ago 48
AngularJS Question

AngularJS - how to set css class for the custom directive?


css class for the
html element which I'm going to use as directive like this:

<nav tab></nav>

It expected to be interpreted like this:

<nav class="tab">

... and everything works almost as expected except of the issue I cannot set the CSS class to the top
element. Of course, I could specify it using
explicitly but it seems to be not a great idea.

Have heard about
option but it doesn't work at all:

tab.directive('tab', function($compile) {
return {
restrict: 'A',
templateUrl: 'nav-tab.html',
controller: function($http, $scope) {
.success(function(data) {
$scope.tabs = data;
}).error(function() {
controllerAs: 'tab',
link: function(element, scope) {

How to add the CSS class to the top directive element without it's explicit specifying right at the element?

Answer Source

You have a wrong sequence in link function

Instead of

link: function(element, scope) {

Change it to

link: function(scope, element, attrs) {

Then you can directly do element.addClass as jQLite api has .addClass method available on it.