Use the promise in the directive for the dynamic template Url

Question

I have a SharedData promise that also returns the value of the .template variable. The mytemplate value with which I am building the URL so that I ant go to the templateUrl directive, but without success.

app.directive('getLayout', function(SharedData) {

var buildUrl= '';

SharedData.then(function(service) {
    buildUrl = service.template + '/layouts/home.html';
    console.log(buildUrl); // return mytemplate/layouts/home.html which is the URL I want to use as templateUrl
});

return {
    restrict: 'A',
    link: function(scope, element, attrs) {...},
    templateUrl: buildUrl
}
});

Thanks for helping me!

Answer 1

I solve my problem using $ templateRequest

app.directive('getLayout', function($templateRequest, SharedData) {

return {

    restrict: 'A',

    link: function(scope, element, attrs) {

        SharedData.then(function(service) {

            myTemplate = $templateRequest(service.template + '/layouts/home.html');

            Promise.resolve(myTemplate).then(function(value) {
                element.html(value);
            }, function(value) {
                // not called
            });
        });
      }
    };
});

Here is the plunker

Hope this helps some people :) and thanks to @Matthew Green

Answer 2

, , , templateUrl . , promises, , , - link.

.

  app.directive('getLayout', function($templateCache, SharedData) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        SharedData.then(function(templateName) {
          element.html($templateCache.get(templateName));
        });
      }
    }
  });

plunkr, . , $templateCache, , $http.get() .