带有动态模板的 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;
});
};
};

该指令实际上位于索引.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

在这一部分中，您似乎正在观察一个名为"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';
});