使用参数重新加载页面时 AngularJS css 样式丢失

Question

我正在构建一个使用 UI 路由器进行路由的 AngularJS 页面。我的问题是，当我使用参数重新加载页面时，css 样式表丢失了:(

css 文件在我的 index.html 中引用如下:

<link href="Content/css/style.css" rel="stylesheet" />

我的路由配置如下:

  .state('member', {
        url: '/member/:userId',
        views: {
            'content': {
                templateUrl: 'app/views/member.html',
                controller: 'memberController'
            }
        },
        data: {
            access: 'access.user'
        }
    })

我也有 html5mode(true) 如果那有区别的话。我在谷歌上搜索了很多，但没有发现其他人有这个问题，这让我得出结论，我完全误解了一些东西:)有人能在这里指出我正确的方向吗？

Answer 1

我遇到过类似的问题。我总是在刷新时丢失样式表。我尝试在 IE 中加载页面，但看到了一些在 Chrome 中没有看到的警告:

SEC7113: CSS was ignored due to mime type mismatch
File: reset.min.css

SEC7113 链接:https://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

-> 检查以确保头部的 css 以这种方式包含在内:

<link rel="stylesheet" type="text/css" href="css/reset.css">

需要包含 type="text/css"

这也让我来到这里:CSS is not loaded at all in Internet Explorer (SEC7113)在检查了我的请求之后，我发现我的样式表的 url 是

viewName/css/reset.css

所以我已经将我的包含更改为

<link rel="stylesheet" type="text/css" href="/css/reset.css">

(在 css 地址开头的附加斜杠)并且所有都再次工作......

所以在你的情况下应该是

<link href="/Content/css/style.css" rel="stylesheet" type="text/css" />

希望这对您有所帮助。