pass callback to directive - angularjs

Question

Я пытаюсь добавить анимацию к элементу через директиву. Когда анимация завершена, я хочу, чтобы она вызывала переданную функцию обратного вызова. Я стараюсь сделать достигнуть его таким образом (SO - How to add validation attributes in an angularjs directive)

'addAnimation' директива:

angular.module('myModule') 
    .directive('addAnimation', function ($compile) { 
    return { 
     restrict: 'A', 
     scope: { 
     onFinish:"&" 
     }, 
     replace: false, 
     terminal: true, 
     priority: 1000, 
     link: function (scope, element, attrs) { 
     element.on('click', function() {   
      $('.selector').animate({ ... }), function() { 
      if(attrs.cb) { 
       attrs.cb.onFinish(); 
      } 
      });    
     }) 

     element.removeAttr("addAnimation"); //remove the attribute to avoid indefinite loop 

     $compile(element)(scope); 
     } 
    }; 
    }); 

директива 'aDirective' анимация должна быть добавлена ​​к:

angular.module('myModule') 
    .directive('aDirective', function() { 
    return { 
     templateUrl: 'path/to/template.html', 
     restrict: 'EA', 
     link: function (scope, element, attrs) { 
     scope.test = function() { 
      console.log('this should be logged'); 
     } 
     } 
    }; 
    }); 


<div> 
    <div add-animation cb="{onFinish: 'test'}"></div> 
</div> 

Когда я нажимаю он, начинается анимация, но затем я получаю сообщение об ошибке:

Uncaught TypeError: attrs.cb.onFinish is not a function 

Ведение журналакажется, что его не разделяющая функция:

{onFinish: 'test'} 

Что я здесь делаю неправильно?

Answer 1

Вы определили onFinish в области действия директивы, вы должны использовать его как по размаху, он должен быть использован в элементе, как on-finish, так вместо:

attrs.cb.onFinish() 

сделать

scope.onFinish() 

Кроме того, если вы определили его как это:

scope: { 
    onFinish:"&" 
}, 

вы должен передать его в директиву таким образом:

<div add-animation on-finish="test()"></div>