AngularJS ng-include do HistoryJS stop working

Question

My code was working until I started using ng-include. Now, everytime I'll go to a page that uses this directive, I'm getting stuck on the page. The back button has stopped working and you stay forever in a loop of the same page.

My website is running with Asp.NET MVC 5.

Some bits of my code:

HTML "host"

<div id="place">
    <div data-ng-include="'/app/angular/views/place.html'"></div>
</div>

HTML place.html

<div>
    <h1>{{place.PlaceName}}</h1>
    <ul class="unstyled-list">
        <li data-ng-repeat="hint in place.Hints">
            <!-- more code -->
        </li>
    </ul>
</div>

JAVASCRIPT

$scope.place = { };

// 'maps' is a google maps plugin 
maps.autoComplete({ success: function(result) {
    // gets the result of the user search
    History.pushState({ name: result.name, id: result.id }, result.name, '/place/' + result.id);
});

History.Adapter.bind(window, 'statechange', function () { 
    var state = History.getState(); 

    // go to the server and get more info about the location
    $mapService.getMetaInfo({id: state.data.id}).then(function (d) {
        // get place info
        $scope.place = d;
    });
});

When I remove the ng-include and replace it with the "raw" html, it works fine. This "infinite loop" happens only when ng-include is added.

Wellmeaning

I guess you're ought to show how you're using the ng-include directive, and in case you're using it properly, you should provide a plunker that reproduces the problem. – Axial

You should transform any external plugin into an Angular directive, mixing two distinct paradigms for DOM manipulation is not wise. – Wahhabi

I can't imagine anyone doing that. If it was a simple plugin, I would agree with you, but, any plugin ... it is kind too heavy, don't you think? – Wellmeaning

@LeCoder actually you shouldn't. One of aims of Angular Team is compatibility with other tools. And I agree with Stewie - we can't answer your question without real code. I can only guess that infinite loop because of ng-include inside of place.html template. – Dapsang

can you do this so we can see there is nothing wrong with path .. <div data-ng-include="'ngtplviewplace'"></div> and wrap the template with <script type='text/ng-template' id="ngtplviewplace"> ... </script> – Damnedest

Yeh Nihat is probably right; this sounds like the path at '/app/angular/views/place.html' is wrong. If you are serving from '/app/' then you should trim that part of the path from your ngInclude usage. – Ebro

how about trying to remove the leading slash, so the template request url will be relative to the index page. Also, please indicate the js libraries versions you have used. – Fructify

Answer 1

When you set template url inside ng-include directive, the specified template get called by angular then it put it in angular $templateCache and then that content gets render on the view. If you call it next time it directly gets fetched from angular $templateCache. I would prefer you to put that template in templateCache in angular run phase (before angular run it compile cycle.) I would suggest you to load that template in at the start up of angular.

Put this template inside your angular $templateCache before loading angular on the page(i.e. right after angular config phase)

CODE

angular.module('app',[]).
config(function(){
  //configuration code will be here.
}).
run(function($templateCache,$http){
  //run block will run write after the config phase
  $http.get('/app/angular/views/place.html',{ cache : $templateCache }
});

After this template will be available from $templateCache without making any ajax for template.

Hope this will not cause any infinite loop. like you are facing problem currently.

Thanks.

Hatch

@Le Coder does my answer helped you? – Hatch

Answer 2

I had met this problem once , and it seems be the Html5 mode.

try to add this into your app config :

$locationProvider.html5Mode(false);

Mouldon

Answer 3

put your code in setTimeout because when you use ng-include a few mili secound need to load html and append to div that have ng-include.

setTimeout(function{
// write your code here
},100)

Gebler

A think a callback would be a more reliable solution than a timeout. What if network latency makes the request last for 101 milliseconds or 200? Perhaps you could get a hold of the promise for this request and pass in a successful callback. – Carbonado