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

RPDeshaies commented Mar 6, 2015

+1 for @UltCombo comment

Here is a little class that I did that does the trick

/**
 * AngularHelper : Contains methods that help using angular without being in the scope of an angular controller or directive
 */
var AngularHelper = (function () {
    var AngularHelper = function () { };

    /**
     * ApplicationName : Default application name for the helper
     */
    var defaultApplicationName = "myDefaultAppName";

    /**
         * Compile : Compile html with the rootScope of an application
         *  and replace the content of a target element with the compiled html
         * @$targetDom : The dom in which the compiled html should be placed
         * @htmlToCompile : The html to compile using angular
         * @applicationName : (Optionnal) The name of the application (use the default one if empty)
         */
    AngularHelper.Compile = function ($targetDom, htmlToCompile, applicationName) {
        var $injector = angular.injector(["ng", applicationName || defaultApplicationName]);

        $injector.invoke(["$compile", "$rootScope", function ($compile, $rootScope) {
                        //Get the scope of the target, use the rootScope if it does not exists
            var $scope = $targetDom.html(htmlToCompile).scope();
            $compile($targetDom)($scope || $rootScope);
            $rootScope.$digest();
        }]);
   }

    return AngularHelper;
})();

And you can call like :

$.ajax("myTemplate.html"), {
                success : function(view){
                    //Append the template
                    $("body").append("<div id='my-template-scope'>");
                    var $targetDom = $("#my-template-scope");

                    //Compile it to bind it with angular
                    AngularHelper.Compile($targetDom, view)
                }
            });

The only problem with this is that I can't make this code work if the template contains ng-include. Maybe someone has the answer for this...

frangeris commented Mar 8, 2015

@UltCombo that's exactly what I'm looking, paste the line and it work's like a charm... :D

hayatbiralem commented Apr 28, 2015

Thanks a lot! This is exactly what I was looking for.

spederiva commented Jun 10, 2015

thanks! this is exaclty what I was looking for!

sivakumarbdu commented Aug 7, 2015

Thanks a lot! Its really awesome...!

aoussarmustapha commented Mar 30, 2016

@RPDeshaies thank you so much, but I get this error:
$targetDom.html(...).scope is not a function

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?

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

umidjons/angular-compile-dynamic-html.md

Compile dynamic template from outside of angular

RPDeshaies commented Mar 6, 2015

frangeris commented Mar 8, 2015

hayatbiralem commented Apr 28, 2015

spederiva commented Jun 10, 2015

sivakumarbdu commented Aug 7, 2015

DeeDi commented Mar 2, 2016

aoussarmustapha commented Mar 30, 2016

agnosco commented May 16, 2016

kahboom commented Jun 2, 2016 •

edited

Loading

AshfaqMemon commented Nov 10, 2016

kodero commented May 29, 2017

gaojianzhuang commented Jul 19, 2017

trainoasis commented Dec 11, 2017

umrtariq commented Jan 31, 2018

umidjons/angular-compile-dynamic-html.md

Compile dynamic template from outside of angular

RPDeshaies commented Mar 6, 2015

frangeris commented Mar 8, 2015

hayatbiralem commented Apr 28, 2015

spederiva commented Jun 10, 2015

sivakumarbdu commented Aug 7, 2015

DeeDi commented Mar 2, 2016

aoussarmustapha commented Mar 30, 2016

agnosco commented May 16, 2016

kahboom commented Jun 2, 2016 • edited Loading

AshfaqMemon commented Nov 10, 2016

kodero commented May 29, 2017

gaojianzhuang commented Jul 19, 2017

trainoasis commented Dec 11, 2017

umrtariq commented Jan 31, 2018

kahboom commented Jun 2, 2016 •

edited

Loading