AngularJS - 在指令中绑定多个类

Question

I'm using Waves plugin and I want to use this on 3 different classes.

In jQuery my codes goes like this

Waves.attach('.button', ['waves-button', 'waves-float']);
Waves.init();

In Angular I have converted this to a directive

.directive('waves', function(){
        return {
            restrict: 'A',
            link: function(scope, element) {
                Waves.attach('.btn', ['waves-button', 'waves-float']);
                Waves.init();
            }
        }
    })

I have many elements with above mentioned classes and in all of them, I have to use an extra attribute to make it work data-waves

To avoid this, I've restricted the directive to class but I was able to bind only one class.

.directive('btn', function(){
      return {
          restrict: 'C',
          ...

How can I bind multiple classes to a single directive when it's restricted to class? I'm expecting some thing like

.directive(['class1', 'class2', 'class3'], function(){
      return {
         restrict: 'C',

Answer 1

I think that you must create new directive but share the factory function.

function mySharedDirectiveFactory () {
  return {
  // directive object
  };
}
angular.module('myModule')
.directive('class1', mySharedDirectiveFactory)
.directive('class2', mySharedDirectiveFactory)
.directive('class3', mySharedDirectiveFactory);

Anyway I think that the best is to create just one directive and restrict it to an element or an attribute, so you will have just one definition.