How to add TemplateURL for a variable inside Directive Link function?

Question

How can I include a template URL inside link function in a directive? I am trying to do something like this:

app.directive('something', function($compile,$timeout) {

   return: {

      link: function(scope,element,attrs) {

           var htmlText = ???? // HOW TO INCLUDE A TEMPLATE URL HERE??

            $compile(htmlText)(scope, function(_element,_scope) {
         element.replaceWith(_element);                 
    });

      }, 

   }

});

When I searched, I understand that Angular directives can use templateUrl. But I am trying to store the html codes to a variable that is placed inside the link which in the end gets compiled. Usually for small codes, I just type the HTML inline to var htmlText. But if I have a lot of code, I want to save that to a separate html file and then call that for that variable (like its shown in example above). So my questions are

1) How can I add a link to template URL for a variable inside link?

2) When I am adding the url path, do I add the relative path from where the index.html file is located or the path from where that directive file is located?

I didn't quite understand why you can't use the `templateUrl` property? There used to be some problems with `transclude` and async fetching of templates but to my knowledge that's been resolved in newer versions. — ivarni, Mar 29 '14 at 08:39
From what I understand I dont think the templateURL property will work if the template depends on scope data. — Neel, Mar 29 '14 at 11:10
Seems to work here: http://plnkr.co/edit/9NCSytGVEc4tJaIGjnGv?p=preview but maybe there are issues if the directive's scope is not isolated?`I've never heard of that being a problem before though. — ivarni, Mar 29 '14 at 11:16
good example... yeah it seems to work well with isolated scope. But when I have it as `scope=false`, it wasnt working. I will look into this more and play around a bit.. thank you for showing this. :) — Neel, Mar 29 '14 at 12:04

score 2 · Accepted Answer · edited May 23 '17 at 11:51

2

Well, for a workaround you could just use ng-include in a normal <div> that you render with $compile, so something like:

link: function(scope,element,attrs) {

       var htmlText = '<div ng-include="path/to/template.html"></div>';

       $compile(htmlText)(scope, function(_element,_scope) {
       element.replaceWith(_element);                 
});

[EDIT]

There is even a nicer solution in this Thread. The Path depends on how your Webserver is configured. But usually yes, its the relative Path of your Index.html.

edited May 23 '17 at 11:51

Community

1
1

answered Mar 29 '14 at 08:15

David Losert

4,652
1
25
31

Thats perfect! The idea of using the `ng-include` method in a normal `
` is a good idea and simple too. I went with the solution in the thread you had given that uses `$http` and `$templaceCache`. Thank you so much. Your answer helped me so much. Cheers!
– Neel Mar 29 '14 at 11:01

score 1 · Answer 2 · answered Mar 29 '14 at 08:44

You can use $templateCache.

Here is the code, that shows how it works:

<body ng-app="App">
    <!-- Include template in $templateCache AUTOMATICALLY -->
    <script type="text/ng-template" id="auto.tpl.html">
        <span style="background-color:yellow">{{title}}</span>        
    </script>

    <dir tpl-id="auto.tpl.html" title="Automatic"></dir>
    <dir tpl-id="manual.tpl.html" title="Manual"></dir>
</body>

script:

angular.module('App',[])
.directive('dir',['$templateCache','$compile',function($templateCache,$compile){
    return {
        restrict:'E',
        scope:true,
        link:function($scope, iElement, attrs){
            //Include template in $templateCache MANUALLY
            $templateCache.put('manual.tpl.html','<span style="background-color:red">{{title}}</span>');
            //----------------------------            

            $scope.title = attrs['title'];
            $compile($templateCache.get(attrs['tplId']))($scope,function(cElement){
                iElement.replaceWith(cElement);                
            });
        }
    };
}]);

Thank you @Engineer. I like your approach too. However it looks like a lot of work when compared to the other solution. Thank you heaps though. YOur answer gives me an idea on how I can do that using `$templateCache`. Much obliged! — Neel, Mar 29 '14 at 11:07

How to add TemplateURL for a variable inside Directive Link function?

2 Answers2