AngularJS ng-include不再与HistoryJS兼容

Question

我的代码在使用ng-include之前是可以正常工作的。现在，每当我访问包含该指令的页面时，页面就会卡住。返回按钮停止工作，你将永远停留在同一个页面的循环中。

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

以下是我的一些代码：

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

当我移除ng-include并使用“原始”html替换时，它能够正常工作。只有在添加ng-include时才会发生这种“无限循环”的情况。

- Le Coder

---

我猜你应该展示一下你如何使用 ng-include 指令，如果你使用得当，就应该提供一个 Plunker 来重现这个问题。请注意保持原文意思并使内容更加通俗易懂，不要添加解释或其他额外的内容。 - Stewie

你应该将任何外部插件转换为Angular指令，混合两种不同的DOM操作范式是不明智的。 - Paulo Scardine

我无法想象有人会这样做。如果它是一个简单的插件，我会同意你的看法，但是，任何插件... 它有点太重了，你不觉得吗？ - Le Coder

@LeCoder实际上你不应该这样做。 Angular团队的目标之一是与其他工具兼容。我同意Stewie的观点 - 我们无法在没有真实代码的情况下回答你的问题。我只能猜测由于place.html模板中包含ng-include而导致了无限循环。 - OZ_

你能这样做吗，这样我们就可以看到路径没有问题了。将模板用<div data-ng-include="'ngtplviewplace'"></div>包含，并用<script type='text/ng-template' id="ngtplviewplace"> ... </script>包装模板。 - Nihat

Answer 1

当您在ng-include指令内设置模板URL时，Angular会调用指定的模板，然后将其放入Angular的$templateCache中，然后该内容就会渲染到视图中。如果您下次调用它，它将直接从Angular $templateCache获取。我建议您在Angular的run阶段（在Angular运行编译周期之前）将该模板放入templateCache中。我建议您在Angular启动时加载该模板。

在页面上加载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操作就可以获取模板。

希望这不会引起无限循环，例如你目前面临的问题。

谢谢。

- Pankaj Parkar

---

@Le Coder，我的回答有帮到你吗？ - Pankaj Parkar

Answer 2

我曾经遇到过这个问题，看起来是Html5模式的问题。

尝试将以下内容添加到您的应用程序配置中：

$locationProvider.html5Mode(false);

- Marwen Cherif

Answer 3

将您的代码放入setTimeout中，因为当您使用ng-include时，需要几毫秒来加载HTML并将其附加到具有ng-include的div中。

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

- sajjad

---

我认为回调函数比超时更可靠。如果网络延迟使请求持续101毫秒或200毫秒，该怎么办？也许您可以获取此请求的承诺并传递成功的回调函数。 - Trevor