angularjs - 在 AngularJS 中为 ng-class 使用服务？

Question

您认为是否可以使用服务/指令/... ng-class？

我的意思是我ng-class在几个局部视图中使用相同的。

<div ng-repeat="s in statut">
   <div ng-class="{'draft': s.statut_id == 5, 'to-do': s.statut_id == 10, 'no-go': s.statut_id == 500, 'go': s.statut_id == 1000}"></div>
</div>

当我想添加一个新类时，问题就来了，我必须在每个视图上更改它，但我可能忘记更改这些视图中的任何一个。

有解决办法吗？

Answer 1

我创建了一个您想要实现的基本示例。这最好作为指令来完成。毕竟，ngClass本身就是一个指令。

Plunker 演示

这里发生的所有事情都是利用template可以应用于指令的属性。在这里你定义你的 HTML。

指示：

app.directive('myngclass', function() {
    return  {
        restrict: 'EA',
        replace: true,
        template: "<div class='data' ng-class = \"{'five': d.id == 5, 'six': d.id == 6, 'seven': d.id == 7, 'eight': d.id == 8, 'nine': d.id == 9}\">{{d.name}}</div>",
        link: function(scope, element, attrs) {

        }};
});

HTML

<div ng-repeat="d in data">
    <myngclass></myngclass>
</div>

我并不完全需要在每个 div 中包含什么，所以这个例子是非常基本的。但这应该是一个很好的起点，可以让您到达需要去的地方。