How do I make the following code append 2 to the document?
var $injector = angular.injector(['ng']);
$injector.invoke(function ($compile, $rootScope) {
var link = $compile('<p>{{1+1}}</p>');
var newElement = link($rootScope);
$(document.body).append(newElement);
});
What I now see in browser is
{{1+1}}
EDIT
I want the added to body element, not just be interpolated static HTML, but to be an angular app - so that it reflects changes in scope, has event handlers, etc.
You need that to be bound to the $scope rather than $rootScope, change the line to
function ctrl($scope) {
var $injector = angular.injector(['ng']);
$injector.invoke(function ($compile) {
var link = $compile('<p>{{1+1}}</p>');
var newElement = link($scope);
$(document.body).append(newElement);
});
}
Or, you can use $interpolate module.
function ctrl($scope, $interpolate) {
var $injector = angular.injector(['ng']);
$injector.invoke(function ($compile) {
var link = '<p>{{1+1}}</p>';
var exp = $interpolate(link)({});
$(document.body).append(exp);
});
}
