从 ng-class 中访问一个 div 特定变量

Question

对于我的一个项目，我有一个带有三个条件 ng-class 的 div，看起来像：

<div name="type" ng-class="{'class-one' : stringVariable != "type", 'class-two': stringVariable == "type" && booleanTrue, 'class-three': stringVariable == "type" && !booleanTrue}">My type div.</div>

这是我想要的运行，问题是当我有多个 div 使用相同的功能时：

<div name="type" ng-class="{'class-one' : stringVariable != "type", 'class-two': stringVariable == "type" && booleanTrue, 'class-three': stringVariable == "type" && !booleanTrue}">My type div.</div>
<div name="date" ng-class="{'class-one' : stringVariable != "date", 'class-two': stringVariable == "date" && booleanTrue, 'class-three': stringVariable == "date" && !booleanTrue}">My date div.</div>
<div name="name" ng-class="{'class-one' : stringVariable != "name", 'class-two': stringVariable == "name" && booleanTrue, 'class-three': stringVariable == "name" && !booleanTrue}">My name div.</div>

同样，这可行，但似乎效率低下且笨拙。每次 div 使用此功能时，我最终不得不更改每个 ng-class' 表达式中的变量，并且任何未来的重构都将是底层的主要痛苦。

我正在尝试找到一种方法来在 div 中定义一个变量，然后在 ng-class 中使用它，例如看起来像这样的东西：

<div name="type" ng-class="{'class-one' : stringVariable != $this.name, 'class-two': stringVariable == $this.name && booleanTrue, 'class-three': stringVariable == $this.name && !booleanTrue}">My type div.</div>

不幸的是，也许显然，这行不通。

有没有办法让这种事情起作用？

注意 1：如果不可能，我将通过控制器定义 classes，但我真的很想找到一种方法使其通过 ng-[=38 工作=]
注2：我想尽可能避免使用外部指令

Answer 1

一个快速的解决方案是在模板中使用作用域方法而不是变量。这样你可以更新方法的内部代码，但方法名称保持不变，这主要防止由于逻辑重构而中断。

所以你可以试试这个:

<div name="type" ng-class="{'class-one' : isValidForType()}"

其中 isValidForType 是一个范围方法，如果您需要访问该方法的特殊内容，您也可以将数据传递给该方法 div。

Answer 2

最后，按照 Tushar 的建议，答案是将所有逻辑移动到一个单独的函数中，return ng-class 这样命名。

因此，我们在模板中有：

<div ng-class="myMethod("type")">

在控制器中：

myMethod : function(stringVariable){
  if (this.$scope.stringVariable == stringVariable) {
    if (this.$scope.booleanTrue) {
      return 'class-two';
    } else {
      return 'class-three';
    }
  } else {
    return 'class-one';
  }
}

从 ng-class 中访问一个 div 特定变量

Access a div specific variable from inside ng-class

angularjs

ng-class