Data Binding inside an .append with AngularJS

Question

I used this code (http://jsfiddle.net/ftfish/KyEr3/) to create a form, but I have an input with ng-model set to "value" and I need to print that value with {{ }} on that TD:

angular.element(document.getElementById('space-for-table')).append("&lttd>{{value}}</td>");

I made this way because I need to print on screen the HTML code (that's why I use <instead of <). But the {{value}} don't work with that.

Anyone know how can I get this working? I thought to transform the value of the ng-model in a variable (scope.value), but I'm not expert on AngularJS to achieve that.

Can you set up a fiddle with what you have so far and show what's missing there? It's easier to resolve the issue that way. — Juho Vepsäläinen
– Juho Vepsäläinen, Commented Nov 6, 2014 at 19:05
Unfortunately is a intern project, so it's not safe to post it on public. But I will try to share part of it. — euDennis
– euDennis, Commented Nov 7, 2014 at 10:41

Jussi Kosunen · Accepted Answer · 2014-11-06 19:31:06Z

1

Use $compile to make angular process the templates and directives in your new element:

$compile(newElement)(scope);

angular.module('app', [])
.run(function($rootScope, $compile) {
  $rootScope.value = 123;
  var newElem = document.createTextNode("<td>{{value}}</td>");
  document.getElementById('target').appendChild(newElem);
  // important part:
  $compile(newElem)($rootScope);
  $rootScope.$apply();
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" id="target"></div>

Although if you're just adding similar elements with different data you might just want to use ng-repeat.

edited Nov 6, 2014 at 19:31

answered Nov 6, 2014 at 19:26

Jussi Kosunen

8,2973 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

euDennis Over a year ago

I tried to use &compile, but it seems to not be able to work with two &compile under the same function. For example:

geradorTable.directive("addbuttons", function($compile){ 	return function(scope, element, attrs){ 		element.bind("click", function(){ 			scope.count++; 			angular.element(document.getElementById('space-for-first')).append($compile("<p>First Value</p>")(scope)); 			angular.element(document.getElementById('space-for-table-first')).append(&compile("<p>Test</p>")(scope)); 			scope.countresultado = 0; 		}); 	}; });

euDennis Over a year ago

If I remove the seconds "angular.element" is works, but I need to add content to those two DIV with the same click.

Jussi Kosunen Over a year ago

Looks like a typo, &compile -> $compile

euDennis Over a year ago

Ow, that's true. Well, now it print both code, but I still can't print ">" instead of <

Juho Vepsäläinen Over a year ago

@euDennis, I think you'll need to escape ">" before Angular can print it properly.

|

Collectives™ on Stack Overflow

Data Binding inside an .append with AngularJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related