AngularJS - 如何为自定义指令设置css类？

Question

有对nav html元素，我要去的指令来使用这样tab CSS类：

<nav tab></nav> 

它预计这样解释：

<nav class="tab"> 
    <a></a> 
    <a></a> 
    <a></a> 
</nav> 

...一切几乎和预期一样工作，除了这个问题，我无法将CSS类设置为顶层<nav>元素。当然，我可以明确指定它使用ng-class，但它似乎不是一个好主意。

听说过.addClass()选项，但它并没有在所有的工作：

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); 
      } 
     } 
    }); 

如何将CSS类添加到顶部指令元素，没有它的明确的元素正确指定？

Answer 1

你必须在链接功能

link: function(scope, element, attrs) { 

一个错误的序列

link: function(element, scope) { 

改变它的

相反，然后你就可以直接做element.addClass为jQLite API上有可用的.addClass方法。

Answer 2

我会改变你的指令是一个“元素”（用于属性，而不是“A”“E”）

<tab></tab> 

tab.directive('tab', function($compile) { 
return { 
    restrict: 'E', 
    templateUrl: 'nav-tab.html'... 

然后添加类模板NAV-tab.html：

<nav class="tab"> 
    <a></a> 
    <a></a> 
    <a></a> 
</nav>