Question

我的代码一直有效，直到我开始使用ng-include。现在，每次我去一个使用该指令的页面时，我都会卡在页面上。后退按钮已停止工作，您将永远停留在同一页面的循环中。

我的网站使用Asp.NET MVC 5运行。

我的代码的一些部分：

HTML“主持人”

<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;
    });
});

当我删除ng-include并将其替换为“原始”html时，可以正常使用。只有在添加ng-include时才会发生这种“无限循环”。

Answer 1

当你在ng-include指令中设置模板url时，指定的模板会被angular调用，然后将它放在angular $templateCache中，然后该内容在视图上呈现。如果你下次直接从angular $ templateCache中获取它就调用它。我希望您将该模板放在angular run阶段的templateCache中（在角度运行它之前编译循环。）我建议你在角度启动时加载该模板。

将此模板放在角度$templateCache内，然后在页面上加载角度（即在角度配置阶段之后）

<强> 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 }
});

此模板可以从$ templateCache获得，而不需要为模板创建任何ajax。

希望这不会导致任何无限循环。就像你现在面临的问题一样。

感谢。

Answer 2

我曾遇到过这个问题，它似乎是Html5模式。

尝试将此添加到您的应用配置中：

$locationProvider.html5Mode(false);

Answer 3

将你的代码放在setTimeout中，因为当你使用ng-include时，需要加载一些mili，需要加载html并附加到包含ng-include的div。

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

AngularJS ng-include do HistoryJS停止工作

3 个答案: