AngularJS templateUrl 未在 Internet Explorer 7 中加载模板

Question

根据标题，当我在 $routeProvider 中使用 templateUrl 时，不会加载模板和 Controller 。

在我的配置中，我有:

.when('/thing/:thingId', {
    templateUrl: 'views/things.html',
    controller: 'ThingController'
})

如果我将其更改为

.when('/thing/:thingId', {
    template: '<div>Hello you!</div>',
    controller: 'ThingController'
})

有用。我正在使用 AngularJS 1.2.2。

我尝试过的想法:

我尝试将模板添加到仍然不起作用的脚本标记中。我没有收到任何错误，因为它在 IE 上，所以没有调试消息。我有一个警报，它会在我的 Controller 被实例化的那一刻触发。这不会发生在 IE 7(可能是 8)中。

添加了 html5shiv、json3 shim、angular-ui 的 ie shiv，并且我已经创建了所有常见的文档元素。

我的网站顶部有以下内容:

我尝试过的每个想法都适用于模拟 IE7 的 Chrome 和 IE10(整个工作都适用于模拟 IE7 的 IE10，而不是真正的 IE7)。

我会尝试举一个例子来演示这个问题，但我想先提出这个问题。

编辑 事后看来，我意识到 plunkr 的例子很愚蠢，因为 plunkr 不在 IE7 中运行，而且这段代码在运行 plunkr 的东西中有效。无论如何，我创建了它以便可以查看代码。

http://plnkr.co/edit/Yswo2QzcwfpzT2PXJV8m

Answer 1

对于 Angular 1.2+ 版本，您需要注入(inject) $sce并包裹您的resourceUrl与 $sce.trustAsResourceUrl('...')对于 IE7 及更低版本，在指令中为您提供以下内容:

...
templateUrl: $sce.trustAsResourceUrl('/Resource/That/YouTrust.html')
...

reference

您可能还需要通过执行以下操作(如果您使用的是 jQuery)来修补 document.querySelector:

if (!document.querySelector)
{
    document.querySelector = function (selector)
    {
        return $(selector).get(0);
    };
}

否则 Angular 会在这里爆炸(来自 Angular 来源):

var active = !!(document.querySelector('[ng-csp]') ||
              document.querySelector('[data-ng-csp]'));

还要确保您关注 Angular IE Compatibility Reference ，具体添加 id="ng-app"并且不使用元素指令。

做所有这些，IE7 可能会工作；)

编辑:修复引用 URL