I want to load dynamic HTML content via AJAX, then compile it, because it contains angular directives.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Compile dynamic HTML</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body ng-controller="TestCtrl">
<div obj></div>
<button class="foo">Change</button>
<script type="text/javascript">
var app=angular.module('app',[]);
app.controller('TestCtrl',function($scope){});
jQuery(document).ready(function($){
$('.foo').on('click',function(e){
// todo: load HTML content via AJAX or generate via jQuery
// todo: compile new HTML content, which contains Angular directives
});
});
</script>
</body>
</html>We can get reference to $compile outside of angular via injector().invoke().
jQuery(document).ready(function($){
$('.foo').on('click',function(e){
e.preventDefault();
angular.element(document).injector().invoke(function($compile){
var obj=$('[obj]'); // get wrapper
var scope=obj.scope(); // get scope
// generate dynamic content
obj.html($('<input type="text" ng-pattern="/^([0-9]+)$/" ng-model="test"><span>{{test}}</span>'));
// compile!!!
$compile(obj.contents())(scope);
});
});
});
thanks! this is exaclty what I was looking for!