Question

我注意到当DOM上的某些元素需要使用Angular的各种条件类时，HTML页面会变得多杂乱和不可读。

这样的事情：

<div>This is a Message.</div>

很容易变成这个：

<div ng-class="{'red': vm.isRed, 'bold': vm.isBold, 'big': vm.isBig, 'underline': vm.isUnderline}">This is a Message.</div>

或更大的东西。我想问的是，是否存在从HTML中排除这种逻辑的常见做法？

或许这样的事情：

<div ng-class="objectClass">This is a Message.</div>

并在控制器上显示：

  vm.isRed = true;
  vm.isBold = true;
  vm.isBig = true;
  vm.isUnderline = false;

  vm.objectClass = {
    'red': vm.isRed,
    'bold': vm.isBold,
    'big': vm.isBig,
    'underline': vm.isUnderline,
  };

https://plnkr.co/edit/jKHNwt1LEOuVOHiG7cov?p=preview

Answer 1

我通常使用您在objectClass示例中使用的符号或array notation：

<something ng-class="[source]">

和

$scope.source = ['red', 'bold', 'big'];

在eBay blog上，他们为好模板定义了标准：

不包含业务逻辑
不包括很多逻辑
易于阅读
易于维护

虽然很容易避免第一点，但ng-class使得在模板中创建逻辑表达式变得如此容易，它会诱使你陷入其他危险（即：只需添加另一个表达式，在某些时候你很难理解模板表达式）。

我认为eBay博客的作者在头上打了一针：

虽然我试图反对无逻辑模板，但这并不意味着我提倡另一种极端 - 即一种允许大量逻辑的模板语言。我发现这样的模板语言，特别是那些允许在模板中使用主编程语言的模板，难以阅读，难以维护，而且只是一个糟糕的选择。其中包含Java代码的JSP模板和包含JavaScript的Underscore模板都属于完整逻辑模板。 JSP和Underscore在这里不一定有问题;相反，开发人员经常滥用此类解决方案提供的额外自由。

所以，虽然我喜欢ng-class给我的自由，但我试图限制自己并将逻辑推入控制器。

通常的做法是从DOM中排除ng-class逻辑？

1 个答案: