2016-03-02 55 views
0

我有一个名为fund的角度指令。该指令定义如下。ng级有条件不起作用

return{ 
    restrict: 'E', 
    replace: true, 
    scope: { 
    data: '=', 
    cut: '@' 
    }, 
    templateUrl: 'app/directives/partials/fund.jsp' 
} 

它有一个名为cut的属性。如果设定了剪裁,我将申请text-cut课程,如果没有设置,则不设课程。类是在需要的情况如下:

.text-cut{ 
    overflow: hidden; 
    text-align: left; 
    text-overflow: ellipsis 
} 

我曾尝试使用下面的指令为:

<fund data="myCtrl.fundList" cut="true"></fund> 

<fund data="myCtrl.fundList" cut="'true'"></fund> 

与以下纳克级的模板属性:

ng-class="text-cut: cut" 
ng-class="text-cut: 'cut'" 
ng-class="{text-cut: cut}" 
ng-class="{text-cut: 'cut'}" 
ng-class="text-cut: cut===true" 
ng-class="text-cut: 'cut'===true" 
ng-class="{text-cut: cut===true}" 
ng-class="{text-cut: 'cut'===true}" 

但这些组合中没有一个将text-cut类应用于我的基金指令。错误在哪里?

回答

1

你必须引用text-cut。尝试

ng-class="{'text-cut': cut}" 
+0

感谢您的解决方案! –

1

创建一个函数,该函数根据某些条件返回所需的字符串类。然后在你的ng类中调用它。只要该函数返回你想要的CSS它应该工作。

$scope.checkCut = function(){ 
    if(this.cut != null){ 
     return 'text-cut'; 
    } 
} 

在你的指令

ng-class="checkCut"