Dealing with DOM Manipulations — AngularJS

Problem

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.

Any help is greatly appreciated!

Problem courtesy of: xd44

Solution

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

Solution courtesy of: Andrew Joslin

View additional discussion.