jsFiddle Example: Mustache Directive for AngularJS

In the blog post Considering Speed and Slowness in AngularJS, the idea is put forward to use MustacheJS, wrapped in an AngularJS Directive to render dynamic content, but come away with no or minimal bindings. I liked the idea, but I found the application too specific; while I get the philosophy of making Directives specific usage, I also hate redundant tools and making a separate directive for each and every place I want to use a Mustache template seems terrible too.

The key detail to note in this example is that the first element wrapped by my directive is a div with a ng-non-bindable on it. That is necessary to keep AngularJS from trying to parse and bind your Mustache template code.

 

jsFiddle Example: Final Dynamic Form Example

Ok, so this is the final variation on this that I'm going to post, even though I know that there are more efficient ways to handle element creation in AngularJS than using the ngIf block I'm using here. I've update the previous examples so that we now have two types of rendering for form questions, and the values are still tied to the underlying options values.

Previous Examples:

 

jsFiddle Example: More Dynamic Form Templates

So this is the update to the earlier example, ditching the directive in favor of just simple Angular templating with ngOption and ngRepeat. The point here is to change both the UI and the object being acted upon in a very simple way: Use one dynamic data-set to control another dynamic data-set.

Previous Example:

 

jsFiddle Example: AngularJS Directives for Dynamic Form Configuration

Here I show how you can use a directive to generate form elements by using dynamic scope references. Its not amazing and probably not even the best way to do this, but it works.

This is a middle stage of an example I'll post later of switching the UI completely to set options on different objects.

 

jsFiddle Example: Accessing Higher Contexts in Mustache Templates

A neat bit of Mustache implementation that I'd not really used before but needed: Mustache allows you to access higher contexts by reference, as long as there is not a conflict. A very clean solution unless you have values with a conflicting names, in which case the current context takes precedence.

I totally found this example through a Google search. I claim no ownership, although I did modify it slightly.

 

jsFiddle Example: Using Self-Executing Functions with AngularJS Constants

Properly using Values and Constants in AngularJS can be really powerful, but AngularJS does have one annoyance with Values and Constants: if you want to keep values bundled together (for readability), its hard to have them also reference each other. Self-executing code to the rescue: just build up the value and return it from the function automatically.

 

More Entries

Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me on LinkedIn.