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

【问题标题】：use service for ng-class in AngularJS?在 AngularJS 中为 ng-class 使用服务？
【发布时间】：2014-05-14 18:35:20
【问题描述】：

您认为是否可以为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>

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

有解决办法吗？

【问题讨论】：

我认为快速破解可能是运行块中的 $rootScope = Myservice 或 ng-repeat $scope = Myservice 的专用控制器

标签： angularjs angularjs-scope angularjs-ng-repeat ng-class

【解决方案1】：

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

Plunker Demo

这里发生的所有事情都是利用可以应用于指令的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 中需要包含什么，所以这个例子是非常基本的。但这应该是一个很好的起点，可以帮助您到达需要去的地方。

【讨论】：

是的，你的例子有效。但这需要在具有特定名称的ng-repeat 中，这里是d，对吧？该指令是否可以基于上面的ng-repeat？
@Steffi 我不太确定你的意思。该指令正在重复。如果你不想将它作为一个元素来做，你可以把它作为一个带有ng-repeat 的属性。它的行为完全相同。如果我不理解您的问题，请告诉我。
哦，我想我明白你的意思了。正确的。您可以将d 更改为您要重复的任何内容。