类指令在使用带条件的ng类时不起作用。
类指令在使用带条件的ng类时不起作用。
提问于 2015-06-20 03:14:46
我试着按下面的方式加载指令，但它没有工作。
<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的指令。有人能帮忙吗？
回答 3
Stack Overflow用户
发布于 2015-06-20 03:41:25
您可以使用三元表达式
<ng-class="condition ? 'true' : 'false'"></div>因此，请使用以下代码：
<div ng-class="{'nav-dropdown' : dt.url == null }"> </div>你可以用这个：(这对我有用)
<div ng-class="dt.url == null ? 'nav-dropdown' : ''"></div>Stack Overflow用户
发布于 2015-06-20 03:44:25
我建议将其计算为true或false，因为ng-class的计算结果仅为布尔值，因此您应该使用：
<div ng-class="{'nav-dropdown' : !dt.url }"> </div>Stack Overflow用户
发布于 2015-06-20 03:49:45
OP编辑后的编辑
指令ng-class专门用于动态设置CSS类，而不是指令。计算指令的顺序很可能会使事情复杂化(例如:nav下拉指令需要在ng类指令计算之后编译)。
要动态设置指令，可以重新考虑通过作用域将数据传递给指令，如果'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>联署材料：
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: '='
}
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30949893
复制相关文章
相似问题
腾讯云开发者
