Html file as content in Bootstrap popover in AngularJS directive

Question

I have an Angular directive to handle Bootstrap popovers as shown in the code below. In my directive I'm setting the popover content to a HTML string, which I think is ugly. What I wanna do is to use an "template.html" file instead of HTMLstring. In that way I will be able to use the same directive with different template files depending on which type of popover I wanna show. That's my plan anyway.

So, how do I in the best way load html code from my template.html and use it instead of the HTMLstring in the AngularJs directive below?

app.directive('mypopover', function ($compile) {  var HTMLstring = "<div><label class='control-label' style='color: rgb(153, 153,153)'>Search</label>&nbsp;&nbsp;"+"<input placeholder='Search assignment' ng-model='searchText' type='text' class='form-control'> <br>"+"<label class='control-label' style='color: rgb(153, 153, 153)'>Select an assignable</label>"+"<p ng-repeat='p in projects | filter:searchText'ng-click='createEvent(user.id,date)'>"+"{{p.title}}</p></div>";  var getTemplate = function (contentType) {     var template = '';     switch (contentType) {         case 'user':             template = HTMLstring;             break;     }     return template; } return {     restrict: "A",     link: function (scope, element, attrs) {         var popOverContent;         if (scope.user) {             var html = getTemplate("user");             popOverContent = $compile(html)(scope);                             }         var options = {             content: popOverContent,             placement: "right",             html: true,             date: scope.date         };         $(element).popover(options);     },     scope: {         user: '=',         date: '='     } }; }); 

Answer 1

A quick solution is using templateCache with inline template:

Inline template:

<script type="text/ng-template" id="templateId.html">       This is the content of the template </script> 

Js:

app.directive('mypopover', function ($compile,$templateCache) {      var getTemplate = function (contentType) {         var template = '';         switch (contentType) {             case 'user':                 template = $templateCache.get("templateId.html");                 break;         }         return template;     } 

DEMO

If you need to load external templates, you need to use ajax $http to load the templates manually and put in the cache. Then you can use $templateCache.get to retrieve later.

$templateCache.put('templateId.html', YouContentLoadedUsingHttp); 

Sample code:

var getTemplate = function(contentType) {     var def = $q.defer();      var template = '';     switch (contentType) {       case 'user':         template = $templateCache.get("templateId.html");         if (typeof template === "undefined") {           $http.get("templateId.html")             .success(function(data) {               $templateCache.put("templateId.html", data);               def.resolve(data);             });         } else {            def.resolve(template);         }         break;     }     return def.promise;   } 

DEMO