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的控制器：

'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

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

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

问题在于html5mode你的主厨网址是/chef/123所以浏览器正在尝试加载你的CSS /chef/styles/style.css您要关闭html5mode或将样式表href更改为root相对（例如/styles/style.css）

使用$ routeParams，CSS无法加载

1 个答案: