ng-class 条件不起作用

Question

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

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

它有一个名为 cut 的属性。如果设置了 cut，我将应用 text-cut class，如果没有设置，则不应用 class。 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}"

但是 none 这些组合应用了 text-cut class 我的基金指令。哪里错了？

Answer 1

你必须引用text-cut。尝试

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

Answer 2

创建一个函数，根据某些条件 returns 您想要的字符串 class。然后在你的 ng-class 中调用它。只要函数 returns css 你想要它就应该工作。

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

在你的指令中

 ng-class="checkCut"

ng-class 条件不起作用

ng-class conditional doesn't work

angularjs

angularjs-directive

ng-class