javascript - 带有动态模板的 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>

当状态更改开始时，loaderTemplate 会在 $rootScope 上设置，如下所示:

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

我已将控制台日志放在 $stateChangeStart 方法上，我可以看到，在交换状态时，模板名称确实发生了变化，但加载器将仅使用首次加载的模板。 有谁知道我怎样才能改变它？

Answer 1

在这一部分中，您似乎正在观察一个名为“template”的属性，但您没有传递一个属性:

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