angularjs - How can I test a directive for a load event? -

so, made simple directive

angular     .module('cherrytech.common', [])     .directive('ctonload', function() {         return {             restrict: 'a',             scope: {                 callback: '&ctonload'             },             link: function(scope, element) {                 element.on('load', function(event) {                     scope.callback({ event: event });                 });             }         };     }); 

and works fine, no issues @ all. callback called event object when element has finished loading. i'm using iframes, should work on element supports load event.

but wanted test it. i'm using testem default configuration, , i'm trying simple test code, can't work:

describe('directive: ctonload', function() {     var element, scope;      beforeeach(module('cherrytech.common'));      beforeeach(inject(function($rootscope, $compile) {         scope = $rootscope;          element = '<iframe src="about:blank" ct-onload="loadcallback(event)"></iframe>';          scope.loadcallback = function(event) { console.log(event); };          element = $compile(element)(scope);         scope.$digest();     }));      it('should call scope callback', function() {         spyon(scope, 'loadcallback');         element.triggerhandler('load');         expect(scope.loadcallback).tohavebeencalled();     }); }); 

usually don't have issue testing directives, event callback driving me nuts. no matter do, can't load event trigger on test case. if replace ct-onload ng-click , trigger click event works expected. hell going on here? testem issue?

you shall call digest notify angular has changed:

element.on('load', function(event) {     scope.callback({ event: event });     scope.$digest(); });