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为null。有人可以帮忙吗？

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

我建议将其评估为true或false，因为似乎ng-class仅计算为布尔值，因此您应该只使用：

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

Answer 3

OP编辑后编辑

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

使用带有条件的ng-class时，类指令不起作用

3 个答案: