Conditionally include header file in angular js

Question

I am trying to conditionally include a header file in my angular app but for some reason it does not seem to load the file.

This is what I have in my view

<div ng-controller="MyCtrl">
<div class="container-fluid" ng-include="'{{display_header()}}'"></div>
{{display_header()}} <!-- just for debug!! -->
</div>

I have this in my controller

$scope.display_header = function() {
    if ($location.path() === '/login') {
    return "partials/login_header.html";
    } else {
    return "partials/navbar.html";
    }
  }
};

My debug line prints the right value so am wondering why it is not being inserted in the include.

Answer 1

ngInclude expects an expression, this should work:

ng-include="display_header()"

While you were using an expression (a simple string), strings in expressions won't be interpolated, so if you check your console, you'll probably see a 404 error linking to a file called "%7B%7Bdisplay_header()%7D%7D".

Answer 2

The argument to ng-include is an Angular expression that should evaluate to a string that represents the URL to look up.

So when you do:

ng-include="'{{display_header()}}'"

You're telling it to evaluate the string '{{display_header()}}', which is not what you want. You want to actually evaluate the function, so the following should work:

ng-include="display_header()"