Dynamic templateUrl while resolving in angular ui-router

Question

So right now I have a parent directive for an entire view so I can swap out templates based on the return status 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; 
            };
        });    
    }
})

However, this would be much cleaner if I could call myService.getData() while resolving my angular-ui route and dynamically load the templateUrl after my promise resolves.

HankScorpio · Accepted Answer · 2015-03-12 19:24:26Z

1

What if you assign the results of getData() to the scope, and bind to that?

template: '<div ng-include="{{contentUrl}}"></div>'

function linker(scope) { 
    myService.getData().then(function(res) {
        var getContentUrl = function() {
            var tpl = res.status >= 400 ? '/tplContent.html' : '/tplError.html';
            return rootDir + tpl; 
        };

        $scope.contentUrl = getContentUrl();
    });    
}

answered Mar 12, 2015 at 19:24

HankScorpio

3,65117 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic templateUrl while resolving in angular ui-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related