Currently, I have implemented a parent directive for an entire view to interchange templates based on the outcome of a promise.
.directive('myDirective', function(myService) {
var rootDir = '/path/to/templates';
return {
restrict: 'E',
replace: true,
controller: controller,
link: linker,
template: '<div ng-include="getContentUrl()"></div>'
};
function controller($scope) { ... }
function linker(scope) {
myService.getData().then(function(res) {
scope.getContentUrl = function() {
var tpl = res.status >= 400 ? '/tplContent.html' : '/tplError.html';
return rootDir + tpl;
};
});
}
})
Yet, it would be more efficient if I could execute myService.getData() while resolving my angular-ui route and dynamically load the templateUrl once my promise is fulfilled.