xd44 xd44 - 1 month ago 11
AngularJS Question

Dealing with DOM Manipulations in AngularJS

When I perform DOM manipulation (add new HTML) using jQuery, AngularJS doesn't automatically detect variables in the new HTML and replace them with their values. For example:

$scope.showSummary = function($event){

$($event.currentTarget).html("<div>{{row}}</div>");

};


This is a simple example, but after changing the HTML in the element (this function was called by
ng-click
), the output it still
{{row}}
instead of what row should mean in the context/scope.

Answer Source

You have to inject $compile (http://docs.angularjs.org/api/ng.$compile) and use it so angular knows about the new html.

$compile('<div>{{row}}</div')($scope).appendTo($event.currentTarget);

However, it is frowned upon in angular to do DOM manipulation in your controllers. You want your controllers to handle business and your views to handle the view.

Try a directive to do what you want. http://docs.angularjs.org/guide/directive