帶有動態模板的AngularJS加載屏幕

Question

因此，我有一個接受模板名稱的指令，該名稱可動態加載正確的模板。 看起來像這樣：

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

該指令實際上位於index.html頁面上，如下所示：

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

狀態更改開始時，在$ rootScope上設置loaderTemplate ，如下所示：

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

我已經將控制台日志放在$ stateChangeStart方法上，可以看到在交換狀態時模板名稱確實發生了變化，但是加載器只會使用首次加載的模板。 有誰知道我如何改變它？

Answer 1

在這一部分中，您似乎正在觀察一個稱為“模板”的屬性，但沒有傳遞一個：

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

在這種情況下，您需要像這樣使用它：

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

另一種選擇是改為觀察pkSplash屬性：

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