Class directive not working when using ng-class with condition

You can use ternary expression

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

So, instead use this:

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

You could use this: (This works for me)

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

I would suggest evaluating it as either true or false as it seems that ng-class only evaluates to a boolean, so you should just use:

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

Edit after OP edit

The directive ng-class is specifically for dynamically setting a CSS class, not a directive. The order in which the directives are evaluated is most likely complicating things (ex: the nav-dropdown directive would need to be compiled after the ng-class directive was evaluated).

To dynamically set a directive, maybe reconsider passing the data to the directive via the scope, and have the directive behave differently if 'url' is null.

Here is an updated fiddle demonstrating this:

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: '='
        }
    };
});