templateRequest fallback in AngularJS

问题

I have the following service I use to pull out a template for a state in my AngularJS application:

.factory('templateService', ['$templateRequest', '$translate', function($templateRequest, $translate) {
    return {
        getTemplate: function(stateParams, url) {
            return $templateRequest( 'partials/' + url + '-' + ( $translate.use() ? $translate.use() : $translate.preferredLanguage ) + '.html'); 
        }
    }
}]);

and this is it in use:

.state('section3',
{
    parent: 'maincontent',
    url: '/section3',
    views: {
        'header@maincontent': {
            templateUrl: 'partials/section3/_header.html'
        },
        'content@maincontent': {
            templateProvider: function($stateParams, templateService) {
                return templateService.getTemplate($stateParams, '/section3/_content');
            }
        }
    }
})

As you can see from the service, I pass some extra information from the $translate module to load a language-specific template, however if the template doesn't exist it just an error.

What I want to do is catch the error if the template doesn't exist and then load in a fallback instead.

Something along the lines of:

var request = $templateRequest( 'partials/' + url + '-' + ( $translate.use() ? $translate.use() : $translate.preferredLanguage ) + '.html');
if(request)
    return request;
else
    return $templateRequest( 'partials/' + url + '-fallback.html');

How do I check if $templateRequest was successful or not? As the above code doesn't work out of the box.

I've found that because $templateRequest is a Promise, I can catch the error with:

.factory('templateService', ['$templateRequest', '$translate', '$compile', function($templateRequest, $translate, $compile) {
    return {
        getTemplate: function(stateParams, url) {
            $templateRequest('partials' + url + '-' + ( $translate.use() ? $translate.use() : $translate.preferredLanguage ) + '.html')
            .then(function(response){
                return $compile(response);
            })
            .catch(function(){
                return $templateRequest('partials' + url + '-en.html');
            }); 
        }
    }
}]);

However that being said, even using $compile, means that the returned template isn't being used for either the then or the catch. So now the templates aren't getting used at all...

回答1:

I think that you are missing the return from templateService.getTemplate.

.factory('templateService', ['$templateRequest', '$translate', '$compile', function($templateRequest, $translate, $compile) {
    return {
        getTemplate: function(stateParams, url) {
            return $templateRequest('partials' + url + '-' + ( $translate.use() ? $translate.use() : $translate.preferredLanguage ) + '.html')
            .then(function(response){
                return $compile(response);
            })
            .catch(function(){
                return $templateRequest('partials' + url + '-en.html');
            }); 
        }
    }
}]);

来源：https://stackoverflow.com/questions/35157587/templaterequest-fallback-in-angularjs

标签

javascript

angularjs