directive with inline tpl containing ng-include - angularjs

Question

I have a directive with inline template containing a ng-include directive element.
When karma testing my directive and logging the result of compiled element . the tesult contains a ng comment saying the ng-include is undefined . What do I make wrong ? The directive works fine but the karma testing seems not work.

Answer 1

I think I know what you're asking but the question can really use some revision, and include some sample code. I'm going attempt to answer because I ran into this issue a while back and it took a lot of hair pulling to finally figure it out and the fix is really easy.
I'm have to make a few assumptions and expand on this question to clarify the scenario for future readers.
Assumption 1: your directive works in normal use outside of testing.
Assumption 2: the root element of your directive template is the one with ng-include. Basically, it looks like this:
module('myapp').directive('myDirective', function(){
return {
restrict: 'E',
replace: true,
template: '<ng-include src="myRealTemplateUrl" ></div>',
}
});
Assumption 3: When you create and run a Jasmine unit-test similar to this one, the result of elem.html() is undefined:
it('Renders something cool">', function(){
var elem = $compile('<my-directive></my-directive>')($scope);
$scope.$digest();
console.log('ELEM', elem.html());
expect(elem.html()).toContain("foo);
});
With that out of the way, this question now can be answered.
ng-include uses element transclusion. When the root node of the HTML fragment passed to $compile uses element transclusion, Angular turns that root node into a comment node. Angular then appends the rendered version of your directive as a sibling node right below that original root node. So elem is now a comment node, and therefore elem.html() is undefined.
More thorough explanations can be seen in this tutorial or here
The solution is simple though, just wrap whatever you passed to $compile inside another root element. So don't do this:
// don't do this
var elem = $compile('<my-directive></my-directive>')($scope);
do this:
// but do this
var elem = $compile('<div><my-directive></my-directive></div>')($scope);
That's all you have to do to make top-level ng-include work in a unit test.