I have created a custom directive called lobInclude, which is similar to ngInclude but with no isolated scope:
.directive("lobInclude", ["$templateRequest", "$compile", function($templateRequest, $compile) {
return {
restrict: "A",
scope: false,
compile: function() {
return {
pre: function(scope, elem, attrs) {
var toObserve = "lobInclude";
attrs.$observe(toObserve, function(value) {
value = scope.$eval(value);
$templateRequest(value, true).then(function(response) {
if (angular.isDefined(attrs.replace))
elem.replaceWith($compile(angular.element(response))(scope));
else
elem.append($compile(angular.element(response))(scope));
});
});
},
post: function() { }
};
}
}
}]);
Everything seems to be working fine, however, the ng-Messages are not functioning correctly when using my directive. You can view an example here: http://codepen.io/jros/pen/jPxmxj?editors=101
In the provided code pen, there is a form with an input field and my directive that includes a script with ng-template containing another input field.
The ng-messages in the first input field work properly, but not in the included template.
Any suggestions or ideas on how to resolve this issue?