AngularJS: Using dynamic content with $compile
One of the more opaque concepts about AngularJS is the process that converts a chunk of HTML from a template into “Angularized” HTML which is then inserted into the DOM. During this conversions, custom directives are replaced with their corresponding HTML content, Angular directives like ng-repeat are processed, and any event handlers of interest are wired up. As it turns out, Angular’s $compile service is what’s responsible for making the magic happen. OK great, but why is this interesting or important? Because leveraging the $compile service directly lets you take dynamic content and process it to enable Angular directives and behaviors.
Since examples are always helpful, here’s an admittedly contrived one that we’ll walkthrough. Imagine that we’re building a WordPress slideshow plugin and we want to support custom themes for individual slides. So in our plugin, a user would be able to modify the HTML that displays a slide, we’d save it to the database, and then retrieve that template when we render the slides. For arguments sake, let’s assume the “default” template for the slideshow looks something like this:
<div ng-class="slide.isActive ? 'active slide' : 'slide'">
<slide-image ng-src="{{ slide.imageSrc }}"></slide-image>
<div class="description" ng-bind="slide.description"></div>
<starbar config="slide.starConfig"></starbar>
</div>As you can see, we’ve got a few directives and by default we’re displaying some description. Generally, we could set this up by creating a “slide” directive that looks something like:
angular.directive('slide', function(){
return {
restrict: 'E',
scope: {slide: '='},
templateUrl: 'slide.html',
};
});Great, nothing to crazy but with this setup there’s no way to supply dynamic HTML from our database to use in the template. In order to allow a custom template you’d just need to modify the directive to look something like:
.directive('slide', function($sce, $compile){
return {
restrict: 'E',
replace: true,
scope: {slide: '='},
template: "<div></div>",
link: function(scope, el, attr){
angular.element(el).html(scope["slide"].template);
$compile(el)(scope);
}
};
})And then you’d be able to use it with:
<slide slide='config'></slide>
/** Javascript **/
$scope["config"] = {
"template": "<h3 style='color: red; font-weight: bold' ng-bind='slide.description'></h3>",
"description": "hello world!",
};The key difference is that in the modified directive the template is inserted into the directive’s element using “angular.element(el).html(scope[“slide”].template);“ and then finally the $compile service is invoked to process the regular HTML to get Angular magic.
Anyway, as always questions or comments welcome!
