CODEWITHSUNDEEP
angularjs
jrock2004
jrock2004

Reputation: 3501

ng-include using scope variables not working

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

Upvotes: 1

Views: 627

Answers (1)

metacubed
metacubed

Reputation: 7271

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.

Upvotes: 1

Related Questions