I have been diving into angular.js these days, and it is turning out to be one of those things I wish I did a long time ago. I have been making a lot of demos for my test_angular project and then writing about them here. For one of my demos I thought it would be fun to begin to explore this idea of using angular to extend html by making my own elements. A little ways back I wrote a post on chart.js Which is a pretty cool project for making canvas charts, so why not some kind of chart element that makes use of angular.js and chart.js?
So at the time the chart element I made looks like this:
Of course this is all data that I use in the link method of the directive that I made. I just wrote a post on how to make custom directives so I will not get to deep into that here.
In order for my custom html to have any meaning I need to define a directive for it. I will of course want to make sure that it will work as a stand alone element, and maybe also an attribute, so I will want to set the restrict property to AE. replace should be set to true because I think I am going to do everything with attributes, so I will just use that space for a fail message maybe. In addition the template will juts be a canvas element, nested in div.
As you can see most of the action is happening in the link method. Here I am given references for the current scope, element (the div in the template), and attributes from my x-chart element. For now I am not taking into consideration the use of a controller, and just define things that I assume are not there because of a controller. That of course is a simple fix, the bottom line is that I get the idea, and yeah this is pretty awesome.