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.
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.
AngularJS has a really poor handling of timeouts, at least for complex HTTP calls. You can provide a timeout in milliseconds, but if the request does time out, you just get a cancelled request. Now this might be fine for simple situations, but when you have CORS Ajax calls, you end up not being able to tell a timeout from a CORS request failure (at least not easily). This can be handled by switching to setting the timeout with a Promise instead. This code shows how to use a promise for your timeout in AngularJS to get clear error messages.
More in my series showing how to do small things with AngularJS. This time its controlling masking layers "the Angular way" but using ng-class to apply the masking layer. The CSS code is largely just your bog standard masking layer code with a centered alert box, but I've added a CSS3 animation for the opacity to make it fade in and out.
This is a variation on a previous example, but I was recently asked how to generate HTML for tested items with AngularJS. This process is simple: create a fragment that represents the repeating element and then use ng-include and careful reference naming to create the recursion.
So I've been having problems finding the time to construct a proper blog posting about what I'm working on and learning right now, but I'm also generating a lot of small jsFiddle examples of how to do certain things for other developers. I'm going to try to start linking those things here, so even if I can't explain the code, you can get in and take a look.
That said, here is my first example: how to handle the display of nested data in AngularJS. One of the things that jQuery heavy developers are used to doing is getting in there and manipulating the DOM directly and adding new content. AngularJS flips that on its head and says, essentially: "Do nothing to the DOM after load, only touch the data.". Click below to see an example of that.
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.