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

发布时间：2020-12-17 16:58:33 所属栏目：安全来源：网络整理

导读：根据标题,当我在$routeProvider中使用templateUrl时,模板和控制器不会加载. 在我的配置中,我有： .when('/thing/:thingId',{ templateUrl: 'views/things.html',controller: 'ThingController'}) 如果我改变它 .when('/thing/:thingId',{ template: 'divHell

根据标题,当我在$routeProvider中使用templateUrl时,模板和控制器不会加载.

在我的配置中,我有：

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

如果我改变它

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

有用.我正在使用AngularJS 1.2.2.

我尝试过的想法：

>我已经尝试将模板添加到脚本标记中,但仍无效.我没有错误,因为它在IE上,没有调试消息.我有一个警报,在我的控制器被实例化时触发.这不会发生在IE 7中(可能是8).
>添加了html5shiv,json3 shim,angular-ui即shiv,我创建了所有常见的文档元素.
>我的网站顶部有以下内容：

< html class =“ng-app：ThingApp”ng-app =“ThingApp”id =“ng-app”xmlns：ng =“http://angularjs.org”>

我尝试过的每个想法都适用于Chrome和IE10模拟IE7(整个过程在IE10模拟IE7,只是不是真正的IE7).

我会尝试举一个例子来证明这个问题但是想先提出问题.

编辑事后我意识到一个plunkr示例是愚蠢的,因为plunkr不能在IE7中运行,并且此代码适用于运行plunkr的东西.无论如何,我创建它以便可以查看代码.

http://plnkr.co/edit/Yswo2QzcwfpzT2PXJV8m

解决方法

对于Angular版本1.2,您需要注入$sce并使用$sce.trustAsResourceUrl(‘…’)包装您的resourceUrl以用于IE7及更低版本,在您的指令中提供以下内容：

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

reference

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

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

否则角度会在这里爆炸(来自Angular来源)：

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

还要确保您遵循Angular IE Compatibility Reference,特别是添加id =“ng-app”而不使用元素指令.

做所有这些和IE7可能会工作;)

编辑：修复参考URL

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!