AngularJS - 如何爲自定義指令設置css類？

有對nav html元素，我要去的指令來使用這樣tab CSS類：AngularJS - 如何爲自定義指令設置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類添加到頂部指令元素，沒有它的明確的元素正確指定？

來源

2016-09-22 WildDev

當你做'.addClass'時發生了什麼？控制檯中的任何錯誤？ –

@PankajParkar，當前的代碼中有一個空的Chrome控制檯。如果我使用'.addClass（）'作爲'element.addClass（）'它說'.addClass不是一個函數'，我認爲它發生是因爲沒有JQuery – WildDev

你必須在鏈接功能

link: function(scope, element, attrs) {

一個錯誤的序列

link: function(element, scope) {

改變它的

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

來源

2016-09-22 15:54:12

仍然是一樣的:( – WildDev

是的，已經切換到'element.addClass（'tab'）'。謝謝:)）5分鐘接受 – WildDev

一旦你解決了上述問題，你也不需要包裝元素。 – Nix

我會改變你的指令是一個「元素」（用於屬性，而不是「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>

來源

2016-09-22 15:59:56 Teknotica

'replace：true'已被棄用..不鼓勵使用它。沒有'replace：true'，它顯然會工作。 –

有趣的筆記+1，謝謝 – WildDev

更新:)謝謝 – Teknotica

AngularJS - 如何爲自定義指令設置css類？

回答

相關問題