類指令在使用ng-class時不起作用

Question

我嘗試加載下面的指令，但它不起作用。

<div ng-class="{'nav-dropdown' : dt.url == null }"> </div> 

它工作正常，如果我只是把它分到一個班是這樣的：

<div class="nav-dropdown"> </div> 

編輯：

當使用這種方法：

<div ng-class="{'nav-dropdown' : dt.url == null }"> </div> 

類被添加到HTML內部爲

<div class="nav-dropdown"> </div> 

的主要問題是：該指令不顯示爲

<div class="nav-dropdown"><div>This is directive template</div></div> 

我想要做的是符合條件加載指令：dt.url爲空。任何人都可以幫忙

Answer 1

您可以使用ternary expression

<ng-class="condition ? 'true' : 'false'"></div> 

所以，改用此：

<div ng-class="{'nav-dropdown' : dt.url == null }"> </div> 

您可以使用此：（這爲我的作品）

<div ng-class="dt.url == null ? 'nav-dropdown' : ''"></div> 

Answer 2

我會建議將它評估爲真或假，因爲它似乎是ng-class只計算爲一個布爾值，所以你應該只使用：OP編輯後

<div ng-class="{'nav-dropdown' : !dt.url }"> </div> 

Answer 3

編輯

該指令ng-class是專門爲動態地設置CSS類，而不是一個指令。評估指令的順序很可能使事情變得複雜（例如：在評估ng-class指令後需要編譯nav-dropdown指令）。

要動態設置指令，可能需要重新考慮通過範圍將數據傳遞給指令，並且如果'url'爲null，則指令的行爲將有所不同。

這裏是一個更新的小提琴證明這一點：

http://jsfiddle.net/spanndemic/7Ltm9bfq/

HTML：

<div ng-app="docsSimpleDirective"> 
    <div ng-controller="Controller"> 
     <div nav-dropdown dropdown-data="dt1"></div> 
     <div nav-dropdown dropdown-data="dt2"></div> 
    </div> 
</div> 

JS：

angular.module('docsSimpleDirective', []) 
.controller('Controller', ['$scope', function($scope) { 
    $scope.dt1 = { 
     url: null 
    }; 
    $scope.dt2 = { 
     url: 'http://www.google.com' 
    }; 
}]).directive('navDropdown', function() { 

    var _link = function($scope, element, attrs) { 
     var el; 
     if ($scope.dropdownData.url === null) { 
      el = '<div>URL not set</div>'; 
     } else { 
      el = '<div>URL is: ' + $scope.dropdownData.url + '</div>'; 
     } 

     element.replaceWith(el); 
    }; 

    return { 
     replace: true, 
     link: _link, 
     scope: { 
      dropdownData: '=' 
     } 
    }; 
});