javascript - Internet Explorer 8 中的 Angular-UI-Router 嵌套 View

Question

在 IE8 中使用嵌套 View 时，我在显示 Angular UI Router 时遇到问题。它似乎能够深入约 2 层，然后我在控制台中收到以下错误:

Error: [$compile:tplrt] http://errors.angularjs.org/1.3.0-beta.5/$compile/tplrt?p0=message&p1=<ui-view class=ng-scope>

状态的 html 模板已成功加载/拉取，但此错误会在调用状态 Controller 之前停止执行。

不幸的是，我无法在 jsFiddle 中重复这个问题，所以我将尝试在这里说明这个问题。该网站的结构如下所示:

Main page (contains sidebars and title bars that stay constant)-----------------------
|
|    <div ui-view>-Filled with abstract 'User' state html when user.list state called-   
|    |
|    |    <div ui-view="filters">-Search filters displayed here-----------------------
|    |    <div ui-view="list">-Results from the search shown here---------------------
|    |    <div ui-view="details">-If edit/add is clicked, show edit user page---------
|    |    |   The template for the 'details' view is just "<ui-view/>"
|    |    |   This is the page that is not displayed due to the template error
|    |    |___________________________________________________________________________
|    |________________________________________________________________________________
|_____________________________________________________________________________________

这是 states.js 的样子:

.state('user', {
    abstract: true,
    url: '/user',
    templateUrl: '/admin/user/user.html',
    controller: 'userController'
})
.state('user.list', {
    url: '',
    views: {
        'filters': {    templateUrl: '/admin/user/user.filter.html',
                        controller: 'userFilterController' },
        'results': {    templateUrl: '/admin/user/user.list.html',
                        controller: 'userListController' },
        'details': {    template: '<ui-view/>'}                             
    }
})
.state('user.list.add', {
    url: '/add',
    templateUrl: '/admin/user/user.add.html',
    controller: 'userAddController'
})
.state('user.list.edit', {
    url: '/{userId}',
    templateUrl: '/admin/user/user.edit.html',
    controller: 'userEditController'
});

这只发生在 IE8 中，在 IE9+ 和其他现代浏览器中显示正常。它应该兼容 IE8。

编辑:我发现了这个问题。该问题是由于子状态的 HTML 中包含的指令(user.list.edit 和 user.list.add)造成的。该指令配置了“replace: true”，这导致 IE8 抛出模板错误。该指令也在父状态中使用，但没有在那里引起问题。编辑指令以不需要替换解决了该问题。希望这会对遇到同样问题的其他人有所帮助。

Answer 1

根据我的发现，这个确切的错误也可能是由模板 DOM 树深处的错误闭合标签引起的，例如:

<div>
    <div>
        <div></strong> <!-- ERROR! -->
    </div>
</div>

使用类似的方法来防止在构建时发生这种情况:

https://github.com/nikestep/grunt-html-angular-validate