ng-include using scope variables not working

Question

So I am trying to add an ng-include for my side bar content but it is not working.

app.js

...
gvhsApp.controller('MainController', function($scope) {
    $scope.template = 'views/mainSidebar.html';
});

index.html

...
<div class="col-md-4">
    <div ng-include src="template"> </div>
</div>

I am not seeing any errors in my chrome console. Could it be I am not pointing to the file location properly?

Edit:

Directory Structure

app/
   js/
      app.js
   views/
      index.html
      templates/
          mainSidebar.html
build/
   js/
      app.js
   views/
      index.html
      mainSidebar.html

The build directory is where my server is looking at

You might need to do: <div ng-include src="{{template}}"> </div> — Ayush
– Ayush, Commented Oct 30, 2014 at 2:07

metacubed · Accepted Answer · 2014-10-30 02:08:00Z

1

ng-include doesn't automatically resolve the src value to an expression - it just expects text. Use mustaches inside the value:

<div class="col-md-4">
    <div ng-include src="{{template}}"> </div>
</div>

This of course assumes that the <div> is inside an Angular-enabled view and bound to the controller correctly.

answered Oct 30, 2014 at 2:08

metacubed

7,3517 gold badges41 silver badges66 bronze badges

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

1 Comment

jrock2004 Over a year ago

The problem was I was not putting that code inside the ng-view. Once I did that it worked

Collectives™ on Stack Overflow

ng-include using scope variables not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related