Skip to content

Instantly share code, notes, and snippets.

@edgabaldi
Created August 18, 2015 19:02
Show Gist options
  • Save edgabaldi/b4bffa279aa318aa2fe8 to your computer and use it in GitHub Desktop.
Save edgabaldi/b4bffa279aa318aa2fe8 to your computer and use it in GitHub Desktop.
Manually render an angular template from ng-template inside directive
<!DOCTYPE html>
<html ng-app="fooBar">
<head>
<script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/ng-template" id="tpl.html">
<h1>{{message}}</h1>
</script>
<script src="script.js"></script>
</head>
<body>
<visao-geral></visao-geral>
</body>
</html>
// Code goes here
var app = angular.module('fooBar', []);
app.directive('visaoGeral', function($templateCache, $compile){
return {
restrict:'E',
link: function(scope, element, attrs){
var tpl = $templateCache.get('tpl.html');
scope.message = 'Hello World';
_rendered = $compile(tpl)(scope);
element.append(_rendered);
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment