Need to have a CSS class called tab for the nav HTML element, which will be used as a directive:
<nav tab></nav>
The expected interpretation is:
<nav class="tab">
<a></a>
<a></a>
<a></a>
</nav>
Everything works almost as expected except for the issue where I cannot set the CSS class on the top <nav> element. One solution could be using ng-class explicitly, but that doesn't seem ideal.
I've heard about the .addClass() option but it's not working at all:
tab.directive('tab', function($compile) {
return {
restrict: 'A',
templateUrl: 'nav-tab.html',
controller: function($http, $scope) {
$http.get('/Tab/List')
.success(function(data) {
$scope.tabs = data;
}).error(function() {
alert("error");
});
},
controllerAs: 'tab',
link: function(element, scope) {
angular.element(element).addClass('tab');
$compile(element)(scope);
}
}
});
How can I add the CSS class to the top directive element without explicitly specifying it directly in the element?