Question

我有一个名为fund的角度指令。该指令定义如下。

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

它有一个名为cut的属性。如果设置了cut，我将应用text-cut类，如果没有设置，则不应用class。如果需要，该课程如下：

.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属性：

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类应用于我的基金指令。错误在哪里？

Answer 1

你必须引用text-cut。尝试

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

Answer 2

根据某些条件创建一个返回所需字符串类的函数。然后在您的ng-class中调用它。只要函数返回你想要的css就可以了。

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

在你的指令

中

 ng-class="checkCut"

ng-class条件不起作用

2 个答案: