我有一个用户对象，我有一个复杂的逻辑，我想进行单元测试，它接受一个用户对象并决定它应该如何显示 - 应该使用哪个css类。
我认为有两种方法：
<td class="{{ user | classify }}">
或
<td class="{{ user.cssClass }}"><!-- or --><td ng-class="user.cssClass">
或
<td ng-class="computeCssClass(user)">
第一种方法假设我创建了一个基于提供的用户对象返回css类的过滤器。
第二种方法假设我向模型添加了一个新属性cssClass，每当创建一个新用户对象（从REST API获取）时，我都会计算cssClass属性。
第三种方法假设我创建了一个函数来计算所提供的用户对象的css类。
上述三种方法的优点和缺点是什么？
我创建了一个jsfiddle来玩这三种方法。
答案 0 :(得分：1)
这可以使用ng-class自我表达。
<td ng-class="{ active: user.active, suspended: user.suspended }">
或者，如果您直接从API传递cssClass，那么这将更容易
<td ng-class="user.cssClass">
修改
第一种方法
优点：会为您提供所需的输出：）
<强>缺点
collection对象上，以根据过滤条件过滤掉数据。 attribute和{{}}对评估类值没有意义，因为angular会提供ng-class专门用来执行此操作。看起来很不错。但在这里你需要重构你的代码位。将其移至utilService＆amp;让我们通过从控制器调用方法将该代码用于ng-class指令。
<强> HTML
<td ng-class="cssClassComputationCode()">
<强>服务
app.service('utilService', function(){
var self = this;
//below method can be testable by injecting its dependency in testing module
self.cssClassComputationCode = function(){
var cssClass = '';
//here the computation thing will happen
cssClass = 'active';
//some more code
return cssClass;
};
});
<强>控制器
app.controller('myCtrl', function($scope, utilService){
//assigning service method reference to controller scope variable
$scope.computeCssClass = utilService.cssClassComputationCode;
//other code here
});
答案 1 :(得分：1)
我能想到的唯一显着差异是围绕数据绑定
<td class="{{ user | classify }}">
Pro：利用有角度的强大过滤机制，更短更好的语法
Con： $watch将放在user对象上以观察更改，然后调用filter，其实际循环通过{{ 1}}找到正确的$filterProvider函数并执行它（我想你会弄清楚这个过程的开销含义）
providerPro：只是一个普通的双向绑定（Angular JS的魔力），而你是以Angular-way方式进行的
Con：不是真的＆＃34; con＆＃34;，这种方法利用自动双向绑定，这是用户对象属性的<td class="{{ user.cssClass }}"><!-- or --><td ng-class="user.cssClass">
观察更改，并更新类属性
$watchPro：您可以更好地控制何时更新类属性（通过函数的返回值）
Con：它更容易搞砸了。 [已编辑] <td ng-class="computeCssClass(user)">
函数的开销：该函数在$watch中执行多次，并且其返回值与监视更改相比较，可能很昂贵。
如果性能是您最关心的，第3种方法对您来说是个不错的选择。
如果您想使用$digest，在上述所有方法中，第二种方法的开销最小。
您可以考虑使用一次性绑定或自定义指令来处理更新类属性。如果您使用＆＃34;类＆＃34;属性，您将能够利用一次性绑定语法：
ng-class从数据中预编译一些演示文稿属性总是好的，除非您有非常具体的要求，例如根据他/她位置的当前天气更改用户的仪表板背景颜色/图像< / em>（好吧，即使有了这个要求，天气也应该是<td class="{{ ::user.cssClass }}">
）
我看到您在$watch上计算class。很容易达到使用表格显着减慢页面速度的<td>数量（阅读上述参考问题的第二个答案）
无论如何，根据您正在开发的应用程序的真实环境，您应该使用哪种方法。