umidjons/angular-compile-dynamic-html.md

Created August 12, 2014 05:14

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/umidjons/1fb8ae674df4c71f85cf.js"></script>
Save umidjons/1fb8ae674df4c71f85cf to your computer and use it in GitHub Desktop.

Download ZIP

Compile dynamic template from outside of angular.

Raw

angular-compile-dynamic-html.md

Compile dynamic template from outside of angular

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);
			});
		});
	});

agnosco commented May 16, 2016

I get error while getting scope. The error is:
Uncaught Error: [ng:areq] Argument 'scope' is required

kahboom commented Jun 2, 2016 •

edited

Loading

This is good, thank you. My only issue is that I can't get it too work with Angular form validation and it also throws the following error:

TypeError: text.indexOf is not a function .. at $interpolate

And same issue with not being able to use it with ng-include, unfortunately.

AshfaqMemon commented Nov 10, 2016

How can we do same thing with Angular 2? Any idea on this?

kodero commented May 29, 2017

Nice, helped my day.

gaojianzhuang commented Jul 19, 2017

Sorry, this way cannot work in my scenario.
Current Page:
<html>
<head>test</head>
<body ng-app="core">
<div id="AjaxContent"></div>
<input type="button" id="loadContentButton" />
<script> var coreModule = angular.module("core", []); var module = angular.module("myTest", []);
module.controller("MyTestController", ["$scope", function($scope) {}]);

$(function() {
$("#loadContentButton").on("click", function() {
$.ajax({
url: "AjaxContent.html",
success: function(view) {
var ajaxContentElement = $("#AjaxContent");
ajaxContentElement .html(view);
angular.element(ajaxContentElement ).injector().invoke(["$compile", function ($compile) {
var scope = ajaxContentElement .scope();
$compile(ajaxContentElement )(scope);
scope.$apply();
}]);
}
});
});
});
</script>
</body>
Ajax Content:
<div ng-app="myTest" ng-controller="MyTestController">
this is my test page.
</div>

This will throw the js error:
Uncaught Error: [$injector:unpr] Unknown provider: lengthCountLeftFilterProvider <- lengthCountLeftFilter

Please help anyone can.Thx so much!

trainoasis commented Dec 11, 2017

I have the same issue as @agnosco.
Uncaught Error: [ng:areq] Argument 'scope' is required
Any ideas guys?

umrtariq commented Jan 31, 2018

In angularjs controller

scope.htmlVaribale = '<h1>Hello</h1><p>This is Html</p>';

In Html

<div ng-bind-html="htmlVaribale"></div>

Result

Hello
This is Html