Bind Angularjs to newly created html element dynamically

Question

I have a tab page with multiple tabs that once clicked on call a service to return some data. Some of that data returns html forms and are very random. I want to collect t

Answer 1

Based on Sarah's answer, i created a structure to put the directive

.directive('dynamic', function(AmazonService, $compile) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      AmazonService.getHTML()
     .then(function(result){
       element.replaceWith($compile(result.data)(scope));
     })
     .catch(function(error){
       console.log(error);
     });
   }
 };
});

And in the html:

<dynamic></dynamic>

Thanks Sarah, helped a lot!!!

Answer 2

I have a dinamyc table with some ng-repeat's, then when I tried to fill one column with javascript callback function, it give me just in html text like

<td class="tableList_"+myValue> "span class=someclass> some_text /span>" </td>
<td class="tableList_"+myValue> "span class=someclass> some_text /span>" </td>
<td class="tableList_"+myValue> "span class=someclass> some_text /span>" </td>

So I resolved my problem with jquery:

$(".tableListFilas td").each(function(){
   var td_class = $(this).attr("class");
     if(td_class == 'tableList_'+titulo)
     {
       **var toExtraHtml = $(this).text();**
       **$(this).html(toExtraHtml);**
     }
});

then the final output was good:

<td class="tableList_COLORS"> <span class=someclass>some_text</span> </td>
<td class="tableList_COLORS"> <span class=someclass>some_text</span> </td>
<td class="tableList_COLORS"> <span class=someclass>some_text</span> </td>  

Answer 3

One solution would be to use ngInclude with $templateCache, as demonstrated in this Plunker.

There are a couple things to note.

The first is that you can fetch your template using a service and add it to the $templateCache, as described here (example copied):

myApp.service('myTemplateService', ['$http', '$templateCache', function ($http, $templateCache) {
  $http(/* ... */).then(function (result) {
    $templateCache.put('my-dynamic-template', result);
  });
}]);

Then you can include it in your template as follows:

<div ng-include="'my-dynamic-template'"></div>

ngInclude will allow databinding on the html string, so you don't need ngBindHtml.

The second is that, as ngInclude creates a new scope, accessing the html property outside of the newly created scope won't work properly unless you access it via an object on the parent scope (e.g. ng-model="data.html" instead of ng-model="html". Notice that the $scope.data = {} in the parent scope is what makes the html accessible outside of the ngInclude scope in this case.

(See this answer for more on why you should always use a dot in your ngModels.)

---

Edit

As you pointed out, the ngInclude option is much less useful when using a service to return the HTML.

Here's the edited plunker with a directive-based solution that uses $compile, as in David's comment above.

The relevant addition:

app.directive('customHtml', function($compile, $http){
  return {
    link: function(scope, element, attrs) {
      $http.get('template.html').then(function (result) {
        element.replaceWith($compile(result.data)(scope));
      });
    }
  }
})