Having trouble with scope loss during compilation for a dynamic template in my directive. Here's the condensed code snippet:
(function () {
'use strict';
angular.module('cdt.dm.directives').directive('serviceSources', ['$http', '$templateCache', '$compile', '$parse',
function ($http, $templateCache, $compile, $parse) {
return {
restrict: 'E',
replace: true,
scope: {
type: '=',
sources: '='
},
link: function (scope, element, attr) {
var template = 'Template_' + scope.type + '.html';
$http.get(template, { cache: $templateCache }).success(function (tplContent) {
element.replaceWith($compile(tplContent)(scope));
});
$compile(element.contents())(scope);
}
}
}
])
})();
This implementation successfully loads the HTML template.
The structure of the HTML template is as follows:
<table>
<thead>
<tr>
<th>File</th>
</tr>
</thead>
<tbody data-ng-reapeat="src in sources">
<tr>
<td>{{src.fileName}}</td>
</tr>
</tbody>
Sources is an array with two elements. While the scope of the directive confirms this, the ng-repeat in the template doesn't function properly at this stage (likely due to sources being undefined).
Any insights on what might be causing this issue?