Angularjs loading screen with dynamic template

Question

So I have a directive that accepts a template name which dynamically loads the correct template. It looks like this:

angular.module('widget.directives').directive('pkSplash', directive);

function directive() {
    return {
        restrict: 'A',
        controller: 'PkSplashController',
        controllerAs: 'controller',
        bindToController: true,
        template: '<div ng-include="contentUrl"></div>',
        link: lnkFn
    };

    function lnkFn(scope, element, attrs, controller) {
        scope.contentUrl = 'app/directives/pkSplash-' + attrs.pkSplash + '.html';
        attrs.$observe('template', function (template) {
            scope.contentUrl = 'app/directives/pkSplash-' + template + '.html';
        });
        scope.$watch(controller.loading, function (loading) {
            controller.loaded = !loading;
        });
    };
};

The directive actually sits on the index.html page like this:

<div pk-splash="{{ loaderTemplate }}" ng-if="loaderTemplate"></div>

and the loaderTemplate is set on the $rootScope when a state change starts, like this:

function run($rootScope, pkSplashService) {
    $rootScope.$on('$stateChangeStart', function (event, toState) {
        $rootScope.loaderTemplate = pkSplashService.getTemplate(toState.name);
        console.log($rootScope.loaderTemplate);
    });
};

I have put console logs on the $stateChangeStart method and I can see that when swapping states that the template name does change, but the loader will only ever use the template that is first loaded. Does anyone know how I can get it to change?

mcgraphix · Accepted Answer · 2017-07-18 18:49:10Z

1

In this part it looks like you are observing an attribute called 'template' but you aren't passing one:

    attrs.$observe('template', function (template) {
        scope.contentUrl = 'app/directives/pkSplash-' + template + '.html';
    });

In that case, you would need to use it like this:

<div pk-splash template="{{ loaderTemplate }}" ng-if="loaderTemplate"></div>

The other option would be to observe the pkSplash attribute instead:

 attrs.$observe('pkSplash', function (template) {
     scope.contentUrl = 'app/directives/pkSplash-' + template + '.html';
 });

answered Jul 18, 2017 at 18:49

mcgraphix

2,7331 gold badge14 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Angularjs loading screen with dynamic template

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