ng-include not loading partial view

Question

I'm currently working on a project, that I've got some problems with. Whatever I try to do, ng-include can't load a partial view I have in another folder.

I want to load view.html file in pagination folder. My file is in the folder which is on the same level that pagination folder.

Here's my site view fragment

<div class="container">
  <div class="col-sm-6" id="NEWS">
    <div class="well" ng-repeat="info in news">
      <p>
        {{info.description}}
      </p>
    </div>
    <ng-include src="'/pagination/view.html'"></ng-include>
  </div>
</div>

My view.html has a single caption test for testing purpose.

I also tried using this code:

<div ng-include src=....
<div ng-include="....
<ng-include src="'../pagination/view.html".

Nothing seems to work. Someone knows what is the problem about?

Answer 1

My file is in the folder which is on the same level that pagination folder.

You're propably passing a wrong path for the html template.

You have to refer to your template directory as if you're writing in your index.html file. So no matter which html template the ng-include directive exists you have to give it the path as if your root is the place where index.html exists.

Also try to avoid using '/' before the path.

e.g.

Suppose you're having the following folder tree:

---index.html

---/templates/app.html

---/tempates/pagination/view.html

In case you're trying to include the view.html in your app.html then you would do it like this:

<ng-include src="'templates/pagination/view.html'"></ng-include>

I hope it helps.