在AngularJS中使用ng-class服务?

时间:2014-05-14 18:35:21

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

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

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

有解决方案吗?

1 个答案:

答案 0 :(得分:0)

我创建了一个你想要实现的基本例子。这最好是作为指令完成的。毕竟,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中,所以这个例子非常基本。但它应该是一个很好的起点,让你到达你需要去的地方。