AngularJS ng-include做HistoryJS停止工作

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并将其替换为“raw” html时，它可以正常工作。仅当添加了 ng-include时，才会发生“无限循环”。

Answer 1

当您在ng-include指令中设置模板url时，指定的模板将被angular调用，然后将其放入angular $templateCache中，然后该内容将在 View 上呈现。如果您下次调用它，则直接从有 Angular 的$ templateCache中获取它。我希望您将该模板放在run Angular 模板的templateCache中(在Ang之前运行它的编译周期)。
我建议您在启动angular时加载该模板。

在将页面加载到页面上的 Angular 之前(即，在 Angular 配置阶段之后)，将此模板放入您的$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。

希望这不会引起任何无限循环。就像您目前正面临问题。

谢谢。