Use promise in directive for dynamic templateUrl

Question

I have a promise SharedData which return a variable service .template as well. The value is mytemplate with which I build an url that I ant to pass to 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!

score 3 · Accepted Answer · answered May 13 '15 at 13:34

I resolve my issue 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 a Plunker

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

I had to add "$compile(element.contents())(scope);" after "element.html(value);" — John Braxler, Dec 07 '17 at 14:03

Matthew Green · Answer 2 · 2015-05-07T21:39:30.227

1

The docs seem to say that the templateUrl can be set asynchronously. However, I have not been able to show that applies to promises. So one way you can do this then while still using a promise would be to add the template to your element in the link function instead.

That would look something like this.

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

Here is a plunkr to show a full working example. It assumes that the template is loaded into $templateCache so if it isn't you can do a $http.get() for the same effect.

edited May 07 '15 at 21:39

answered May 07 '15 at 16:40

Matthew Green

10,161
4
36
54

What doesn't work? Are you getting an error? Is the template not loading? – Matthew Green May 07 '15 at 20:26
Sorry, the template is not loading. I get 2 errors Error. First is undefined is not an object (evaluating 'b.protocol') and second refer to https://docs.angularjs.org/error/$compile/tpload?p0=undefined – Greg May 07 '15 at 20:51
I had a console.log(service.template) in templateUrl fct and it well return mytemplate… strange ! – Greg May 07 '15 at 20:58
I've changed directions a little bit since I couldn't get an example app working either. Let me know if this update is closer. – Matthew Green May 07 '15 at 21:40
I have done this http://plnkr.co/edit/ZsFjr3UWnn3DnjD6Ad5O?p=preview where I am able to load a template through controller but not with the get-layout directive to load template1.html file – Greg May 09 '15 at 18:22
1

The issue with your plunkr is that you are still trying to use a promise for the templateUrl and that doesn't seem to work. You need to do something closer to what I showed above where you resolve the promise and then manually compile it. – Matthew Green May 12 '15 at 13:43

Use promise in directive for dynamic templateUrl

2 Answers2