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

通常我没有任何问题测试指令，但是这个事件回调让我疯了。无论我做什么，我都无法在测试用例上触发load事件。如果我用ng-click替换ct-onload并触发click事件，那么一切都按预期工作。这到底是怎么回事？这是一个问题吗？

Answer 1

你应该致电digest通知角度有什么变化：

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

Answer 2

我决定杀死testem并使用Chrome启动器返回业力。一切都按现在的样子运作。

如何测试加载事件的指令？

2 个答案: