Sergio Ivanuzzo Sergio Ivanuzzo - 4 months ago 20
AngularJS Question

AngularJS. ng-include inside of ng-view infinitely loads content of ng-view

this is result of

ng-include
inside of
ng-view
output:

current view of my page

Of course, I need to load this page only one time.

My app.js:

var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider

.when('/first_route', {
templateUrl: '/templates/first/index.html',
controller: 'FirstController',
controllerAs: 'First',
})
.when('/second_route', {
templateUrl: '/templates/second/index.html',
controller: 'SecondController',
controllerAs: 'Second',
});

// I omitted my app.run(), because it contains only headers and redirect to
// login page for not authenticated users

};


In my main
index.html
file I use only
ng-view
directive.

My
first/index.html
contains:

<h1>Current page</h1>
<ng-include src="'first/show.html'"></ng-include>
// remaining part of page


My
first/show.html
contains:

<ng-include src="'second/index.html'"></ng-include>


Resume: I try to load templates in next order:


  1. index.html
    (
    ng-view
    )

  2. first/index.html
    (
    ng-include
    )

  3. first/show.html
    (
    ng-include
    )



How to solve this issue?

Answer

I solved the problem.

The issue was in incorrect path, so, when ng-include can't find the template, it become infinitely loading itself.