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.

Langdon · Accepted Answer · 2013-05-24 03:46:03Z

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".

answered May 24, 2013 at 3:46

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

satchmorun · Accepted Answer · 2013-05-24 03:46:37Z

1

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()"

answered May 24, 2013 at 3:46

satchmorun

12.5k2 gold badges43 silver badges27 bronze badges

Collectives™ on Stack Overflow

Conditionally include header file in angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related