我在Internet Explorer中遇到了一个奇怪的问题,我希望有人能够在这里向我解释这个问题.

在我的Angular 2应用程序中,我有一个带有选择框的表单.用户可以在不同的模板(名称)之间进行选择. templates属性是一个数组,在TypeScript组件文件中定义,并填充可能的模板名称.

html模板如下所示：

<select required [(ngModel)]="template">
    <option *ngFor="let t of templates" [ngValue]="t">{{ t }}</option>
</select>

<button type="button" [disabled]="!form1.valid" (click)="nextForm()">Next</button>

整个过程按预期工作(Chrome,Firefox),除非我使用Internet Explorer 11(可能更早).出于某些奇怪的原因,如果只有一个可用,我无法选择该选项.如果有两个选项,则按预期工作.

在Internet Explorer中,会发生以下情况：

> gui渲染,首先模板被定义为空数组
>我在TypeScript组件中的方法从我的restful API获取模板名称,并将结果作为数组写入模板
> gui按预期提供选项
>如果只有一个选项,它看起来是选中但实际上不是.如果我尝试使用下拉菜单并手动选择它,它仍然不会“真正”选择

我可以通过检查绑定的模型值模板(保持为null)以及form1.valid显示false来证明该选项未正确选择(form1是整个表单的名称,请注意select标记是必需的).

到目前为止,我为IE找到的唯一解决方法就是定义

if (this.templates.length > 0) this.template = this.templates[0]

我成功完成模板数组后.但如果你问我,这不应该是必要的.

为什么IE会以这种方式运行,并且有更好的方法来解决这个问题吗？

编辑：它不需要对动态选项或* ngFor做任何事情.我尝试了一个只有一个选项的静态示例,我无法在IE 11中选择它：

<select required [(ngModel)]="template">
    <option>Test</option>
</select>

虽然我无法使用静态选项重现您的问题,但如果它们是异步加载的,我们遇到了动态选项的相同问题,请参阅此 Plunker.

这个原因可能是这个未解决的Angular issue.但是,还有一个可能有用的解决方法：

<form #editForm="ngForm">
    <select name="select">
        <option *ngIf="!editForm.value.select" [ngValue]="null" selected></option>
        <option *ngFor="let option of options" [ngValue]="option">{{option}}</option>
    </select>
</form>

根据标题,当我在$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

感谢SO社区的一些帮助,我有一个工作角度SPA,它使用 ui-router库使用多个状态/视图.但是我得到的行为似乎与angular-ui-router文档不一致.

从他们关于onEnter的文档中,我希望无论何时我使用$state.go(“home”),与该状态的配置对象相关的onEnter()事件都会启动,但我不认为它会发生.例：

/* myApp module */
var myApp = angular.module('myApp',['ui.router'])
.config(['$stateProvider',function ($stateProvider) {

$stateProvider.state('home',{
    url: "/",views: {
        'top': {
            url: "",template: '<div>top! {{topmsg}}</div>',controller: function ($scope) {
                $scope.topmsg = "loaded top!";
                console.log("top ctrl!");
            },onEnter: function () {
                console.log("entered bottom state's onEnter function");
            }
        },'middle': {
            url: "",template: '<div>middle! {{middlemsg}}</div>',controller: function ($scope) {
                $scope.middlemsg = "loaded middle!";
                console.log("middle ctrl!");
            },'bottom': {
            url: "",template: '<div>bottom! {{bottommsg}}</div>',controller: function ($scope) {
                $scope.bottommsg = "loaded bottom!";
                console.log("bottom ctrl!");
            },onEnter: function () {
                console.log("entered bottom state's onEnter function");
            }
        }
    },onEnter: function () {
        console.log("entered home state");
    }
  });
}])
.controller('MyAppCtrl',function ($scope,$state/*,$stateParams*/) {
    $scope.statename = $state.current.name;
    $scope.testmsg = "app scope working!";
    console.log("MyAppCtrl initialized!");
    $state.go("home");
});

正如你可以从状态的配置对象中的所有onEnter()调用中看到的那样,我的期望是当家庭状态加载时,我会开始看到他们正在触发控制台消息的所有状态/视图的列表.但是,仅从主状态的onEnter事件中记录第一个输入的本地状态消息.没有一个其他视图的onEnter被击中.我误读了文档吗？

Here is a long-awaited fiddle进行演示.只需在firebug / chrome devtools中显示控制台,您就会看到缺少控制台输出.

任何帮助都会很棒.我正在使用角度1.2和ui-router 0.2.0.提前致谢！

两件事情：

> onEnter方法适用于状态,而不适用于视图.您在定义中有一个州和三个视图,并且由于某种原因,您尝试将URL附加到您的视图.>为了输入一个州,首先必须退出. (A)你实际上从未离开过主状态(因为你只有一个状态定义开始),所以你永远不能重新输入它. (B)看起来你实际上是想在家里创造儿童状态.即使您修复了语法,它仍然无法工作,因为当您输入父项的子状态时,通过更改为同一父项中的其他子状态,您仍然永远不会实际离开父状态,因此不会重新触发onEnter.