Angularjs Ladebildschirm mit dynamischer Vorlage

Question

So habe ich eine Direktive, die einen Vorlagennamen akzeptiert, der dynamisch die richtige Vorlage lädt. Es sieht wie folgt aus:

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; 
     }); 
    }; 
}; 

Die Richtlinie tatsächlich auf der index.html Seite wie diese sitzt:

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

und der loaderTemplate auf dem $ rootScope gesetzt, wenn ein Der Statuswechsel beginnt wie folgt:

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

Ich habe Konsolenprotokolle auf die $ stateChangeStart-Methode gesetzt, und ich kann sehen, dass beim Wechseln der Status besagt, dass sich der Vorlagenname ändert, aber der Loader immer nur die Vorlage verwendet, die zuerst geladen wird. Weiß jemand, wie ich es ändern kann?

Answer 1

In diesem Teil sieht es aus wie Sie ein Attribut beobachten namens ‚Vorlage‘, aber sie sind nicht vorbei ein:

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

In diesem Fall würden Sie es wie folgt verwenden müssen:

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

die andere Option wäre, das pkSplash Attribut zu beobachten statt:

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