Using Angular with SharePoint 2013 Display Templates

In this post, I want to cover using Angular in your display templates in SharePoint 2013. Before we begin, I just want to take a minute to summarize a very important piece of information.

While the Search Results web part and the Content Search web part are very similar, they do have some very important differences:

The Content Search web part is meant to style a single type of results. It does not handle displaying multiple types of content on the same results page, each leveraging a different display template.

This is where Result Types come in, which is a property native to the Search Results web part. The Search Result web parts gives you a couple of options when configuring your results to leverage your display templates:

  1. You can setup a Result Type and then have that Result Type utilize a display template.
  2. You can configure the Search Results web part to point at your display template directly.

This screenshot illustrates this best:


The latter is not the preferred method for me when I’m trying to style different types of content on a single results page. As a side, Microsoft has a really good reference on which display templates are utilized by which web part by default:

So what am I getting at here? Well the above two options actually have an impact on how you use Angular in your Display Templates. This post won’t get into the detail of setting up Angular to work with your Display Templates, I’ll follow up this post with another in the next week or two. What I do want to discuss is the difference between using Result Types and selecting the display template directly.

So to set this up quickly, I have the following:

<div ng-controller="SearchNewsItemController" id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="DefaultItem" class="ms-srch-item" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">
    <span class="shereen"></span>
    <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>

And my controller as follows:

console.log('controller loaded');
    .controller('SearchNewsItemController', ['$scope', function ($scope) {
        $scope.likes = "25";

Now, if I set my Search Results web part as follows:


I get the expected output of:

Screen Shot 2013-10-31 at 10.51.04 AM

However, AND THIS IS THE MOST IMPORTANT PART: if i configure my Search Results web part to use Result Types as follows:

Screen Shot 2013-10-31 at 10.52.01 AM

I get this:

Screen Shot 2013-10-31 at 10.52.17 AM

So after much troubleshooting, we haven’t found a way to force angular to reevaluate the controller, but we are working on that. I will update this post to reflect any new findings.

It seems that the eveluation that’s happening with the Result Type is slow enough, that the controller is run before the DOM is fully setup and so it’s completely missing it’s bindings. For now, we are going to be using jQuery when leveraging Result Types and Display Templates, but as always, I’d prefer to use Angular, so we’ll keep you all posted!

, ,

2 Responses to “Using Angular with SharePoint 2013 Display Templates”

  1. Yann September 10, 2014 at 10:22 am #

    Hi, thank you for this great article. For your rendering problem, you can leverage angularjs bootstrap function in order to fire a binding. Here is an example of how to achieve it:

    Hope it helps !

  2. Shereen Qumsieh September 11, 2014 at 4:23 am #

    Thanks Yann! Will definitely check this out :) One thing to note, we have no issue with getting angular setup using cswb or srwb as long as we don’t use result types (only supported in srbw though). We use angular extensively in our client side framework Bonzai. The challenge for us was having multiple types of content and display templates render at the same time while still maintaining the correct rendering, but will dig into this again and update this post if we find Elio’s post sheds some light on this problem.

Leave a Reply