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

在這一部分，它看起來就像你正在觀察所謂的「模板」的屬性，但是你是不是傳遞一個：

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