如何在指令上测试angular $ destroy事件?

mrz*_*myr 9 javascript jasmine angularjs angularjs-directive

该指令(隔离范围,被转换,替换)将掩码插入到<body>.

var mask = angular.element('<div id="mask"></div>');

$document.find('body').append(mask);

scope.$on('$destroy', function() {
    mask.remove();
});
Run Code Online (Sandbox Code Playgroud)

我试图通过范围上的简单广播来测试这种情况:

var $document, scope, element, rootScope;

beforeEach(inject(function($compile, _$document_, $rootScope, $injector) {
    rootScope = $injector.get('$rootScope');
    scope = $rootScope;
    $document = _$document_;
    mask = $document.find('#mask');
    element = $compile(angular.element('<overlay id="derp"></overlay>'))(scope);
}));

it('should remove mask when casting the $destory event', function (done) {
    scope.$broadcast('$destroy');
    scope.$digest();
    expect($document.find('#mask').length).toBe(0);
});
Run Code Online (Sandbox Code Playgroud)

知道为什么这不起作用吗?

mrz*_*myr 6

错误是:该指令为<div id="mask"></div>多个叠加创建了多个.因此,当向<div>DOM 添加具有相同ID的多个时,angular似乎存在问题.修好后,所有工作都按预期进行.

it('should remove mask when $destoryed', function () {
    scope.$destroy();
    expect($document.find('#mask').length).toBe(0);
});
Run Code Online (Sandbox Code Playgroud)