如何測試加載事件的指令？

Question

所以，我做了這個簡單的指令

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 });
                });
            }
        };
    });

而且工作正常，完全沒有問題。 元素完成加載后，將使用事件對象調用該回調。 我正在將其用於iframe，但是應該可以在支持load事件的任何元素上使用。

但是后來我想測試一下。 我正在使用具有默認配置的testem，並且正在嘗試這個簡單的測試代碼，但無法使其正常工作：

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 the scope callback', function() {
        spyOn(scope, 'loadCallback');
        element.triggerHandler('load');
        expect(scope.loadCallback).toHaveBeenCalled();
    });
});

通常我沒有任何問題測試指令，但是此事件回調使我發瘋。 無論我做什么，我都無法在測試用例上觸發加載事件。 如果我將ct-onload替換為ng-click並觸發click事件，那么一切都會按預期進行。 這到底是怎么回事？ 這是一個睾丸問題嗎？

Answer 1

您應調用digest通知角度發生了一些變化：

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

Answer 2

我決定殺死Testem，然后使用Chrome啟動器返回業力。 一切正常。