1

所以，我做了这个简单的指令

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，但应该适用于支持加载事件的任何元素。

但后来我想测试它。我正在使用默认配置的 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();
    });
});

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

4

2 回答 2

0

你应该打电话digest通知 Angular 发生了一些变化：

element.on('load', function(event) {
    scope.callback({ event: event });
    scope.$digest();
});
于 2015-07-02T07:55:28.960 回答
0

我决定杀死 testem 并使用 Chrome 启动器回到业力。现在一切正常。

于 2015-07-08T11:10:47.907 回答