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メソッドにコンソールログを書きましたが、テンプレート名が変更されていることをスワップすると、ローダーは初めてロードされたテンプレートのみを使用することがわかりました。 どのように私はそれを変更することができます知っていますか？あなたは「テンプレート」と呼ばれる属性を観察しているが、あなたは1を渡していないよう

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