javascript - 使用 $routeParams，CSS 不会加载

Question

在 ngRoute 中使用参数并直接访问 URL(而不是通过站点内的链接)时，CSS 不会加载。除了 /chef/:id 之外，我的所有路线都运行良好。我用了约曼的 angular generator ，我正在使用 grunt serve 运行。

这是我的路线代码:

   angular
    .module('agFrontApp', [
        'configuration',
        'LocalStorageModule',
        'ngCookies',
        'ngRoute',
        'ngSanitize',
        'ngTouch'
    ])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: '../views/main_view.html',
                controller: 'MainCtrl',
                controllerAs: 'MainCtrl',
            })
            .when('/login', {
                templateUrl: '../views/login_view.html',
                controller: 'LoginCtrl',
                controllerAs: 'login',
            })
            .when('/chefs', {
                templateUrl: '../views/chef_list_view.html',
                controller: 'ChefListController',
                controllerAs: 'chefs',
            })
            .when('/chef/:id', {
                templateUrl: '../views/chef_detail_view.html',
                controller: 'ChefDetailController',
                controllerAs: 'chef'
            })
            .when('/receitas', {
                templateUrl: '../views/recipe_list_view.html',
                controller: 'RecipeListController',
                controllerAs: 'recipe'
            })
            .when('/perfil', {
                templateUrl: '../views/perfil_view.html',
            })
            .otherwise({
                redirectTo: '/'
            });
        $locationProvider.html5Mode(true);

    });

这是 /chef/:id 的 Controller :

'use strict';

(function() {

function ChefDetailController($routeParams, $scope, $log, Chefs)  {
    var vm = this;

    Chefs.getChef($routeParams.id)
        .then(function(data) {
            $log.log('success');
        })
        .fail(function(data) {
            $log.log('something went wrong');
        });
}

angular.module('agFrontApp')
    .controller('ChefDetailController',
        [ '$routeParams', '$scope', '$log', 'Chefs', ChefDetailController]);

})();

我做错了什么？

编辑:

这是 chef_detail_view.html:http://pastebin.com/bL5ST01N

Answer 1

你很可能像这样使用相对 url 加载你的 CSS

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

问题出在 html5mode 你的 chef url 是 /chef/123 所以浏览器试图从加载你的 CSS/chef/styles/style.css 您需要关闭 html5mode 或将您的样式表 href 更改为根相对(例如 /styles/style.css)