AngularJS is so popular these days that I wanted to check out the possibilities in combination with display templates. Once you know the steps to combine them, you could add the magic of AngularJS to your templates. Like for example the templating engine, filtering, directives, etc.
In the first post I will tell you more about my approach of how you could databind the result rows to an AngularJS template.
Note: I will be recreating the default Item_TwoLines template.
Creating the module and controller
The Angular module and controller needs to be created in the previous code bock, the code looks as follows:
When working with display templates, the HTML that these templates render will be added to the page when the last result is completed rendering. This means that Angular could not automatically start the template binding. To solve this problem, we need to manually trigger it. Angular bootstrap function can be used to achieve this:
Providing the data
Next step is providing the search data for your template. The search data could be retrieved from the current context like this:
To bind it, you could do it like this:
Display templates already use a sort of templating engine. The control template provides the overall layout of how you want to present the results, and the item template will define the layout for the result itself.
But if you want to use the templating engine from AngularJS, it is easier to create the whole template in the control display template and not split it up over two display templates. That means that you can just remove the HTML from the item template (that has been written inside the first DIV element).
The template HTML looks like this:
In the control template everything in the first DIV element can be removed, the only thing that need to stay in place is the following piece of code:
These two lines ensure that the group display template will be called, the group display template calls the item template for each item. So if you remove these two lines, nothing will be rendered.
The result of the template should look like this:
Hiding the template
When you are loading the page, you will see the following output until the dataset is binded to the template.
This is because everything is loaded async. To solve this issue, you could hide the controller by adding “display:none” as style attribute, and show it once Angular is loaded.
The following code needs to be added to the item template:
Check out the complete templates to see how it is achieved.
The templates from part 1 can checked on the following location: AngularJS Display Templates - Part 1.
In the next part I will show how you could create your own dataset, so that the template can show the icon, and the second line of info.