I am facing an issue with a custom directive having transclude: true property. The directive contains a template pointing to a simple HTML file with an anchor element having an ng-transclude attribute. The anchor element wraps the content of the directive.
Here is how my test script looks like:
describe('foobar directive', function() {
var $compile, $rootScope, $modal;
beforeEach(module('collective'));
beforeEach(module('test.templates'));
beforeEach(inject(function(_$rootScope_, _$compile_, _$modal_) {
$rootScope = _$rootScope_;
$compile = _$compile_;
$modal = _$modal_;
}));
it('attempts to open the modal when the wrapped element is clicked', function() {
spyOn($modal, 'open');
var el = $compile('<foo-bar><div id="foobar"></div></foo-bar>')($rootScope);
$rootScope.$digest();
el.find('#foobar').click();
expect($modal.open).toHaveBeenCalled();
});
});
I am using ng-html2js-preprocessor to load templates into the test.templates module, and it works for all non-transcluded directives.
However, the test fails as $modal.open() is not being called. The issue lies in the fact that the anchor element in the template is not added to the element after compilation. This problem started with Angular 1.3.0 and persists in Angular 1.3.5.
After compiling in my test, the element looks like:
<foo-bar class="ng-scope">
<div id="foobar"></div>
</foo-bar>
But it should look like this:
<foo-bar class="ng-isolate-scope">
<a href="#" ng-click="blah blah">
<div id="foobar"></div>
</a>
</foo-bar>
The latter is true for 1.2.9 but not for 1.3.0.
Any insights on what could be causing this error?