Question

我有一个应该通过角度路径显示的引导下拉菜单，但即使浏览器URL指向正确的路由，也会显示错误的表单。我对角度和自举很新。

console.log不显示任何错误。

如果您打算回答此问题，请提供一个理由，以便我可以从错误中吸取教训。

Bootstrap Dropdown：

    <li class="dropdown">
        <a href="#" id="drop-toggle-1" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown" role="button" data-aria-haspopup="true" data-aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a id="update-profile" href="#update-profile">Update profile</a></li>
            <li><a id="manage-uploads" href="#manage-uploads">Manage uploads</a></li>
        </ul>
    </li>

Angular路线/控制器（请参阅manage-uploads - manage-uploads.html存在）

    var wtApp = angular.module('wtApp', ['ngRoute'])
// configure our routes
    wtApp.config(function ($routeProvider) {
        $routeProvider
        // route for the home page
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'mainController'
        })
        // route for the writers page
        .when('/writers', {
            templateUrl: 'pages/writers.html',
            controller: 'writersController'
        })

        // route for the enablers page
        .when('/enablers', {
            templateUrl: 'pages/enablers.html',
            controller: 'enablersController'
        })  
        // route for privacy/rues
        .when('/privacy', {
            templateUrl: 'pages/privacy.html'
        })
        // route for the about page
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })  
        // route for the contact pagefa
        .when('/contact', {
            templateUrl: 'pages/contact.html',
            controller: 'contactController'
        })
        // route for the log-in page
        .when('/log-in', {
            templateUrl: 'pages/login.html',
            controller: 'loginController'
        })
        // route for the create account
        .when('/:accounts', {
            templateUrl: 'pages/accounts.html',
            controller: 'createAccountController'
        })
        // route for manage uploads
        .when('/:manage-uploads', {
            templateUrl: 'pages/manage-uploads.html'
        })
    });

// create the controller and inject Angular's $scope
wtApp.controller('mainController', function($scope) {
    $scope.example2model = []; $scope.example2data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"}]; $scope.example2settings = {displayProp: 'id'};
    resetNavbar();
    $("a[href$='']").css({color:'#FF5733'});
});

wtApp.controller('writersController', function($scope) {
    resetNavbar();
    $("a[href$='writers']").css({color:'#FF5733'});
});

wtApp.controller('enablersController', function($scope) {
    $scope.worktype = [
        { icon: "<img src=img/icons/smile-mask.png />", name: "Fiction", ticked: false },
        { icon: "<img src=img/icons/frown-mask.png />", name: "Non-Fiction", ticked: false }
    ];

    resetNavbar();
    $("a[href$='enablers']").css({color:'#FF5733'});

});
wtApp.controller('aboutController', function($scope) {
    resetNavbar();
    $("a[href$='about']").css({color:'#FF5733'});
});
wtApp.controller('contactController', function($scope) {
    resetNavbar();
    $("a[href$='contact']").css({color:'#FF5733'});
});
wtApp.controller('loginController', function ($scope) {
    resetNavbar();
    $("a[href$='log-in']").css({ color: '#FF5733' });
});
wtApp.controller('createAccountController', function ($scope) {
    resetNavbar();
    $("a[href$='create-account']").css({ color: '#FF5733' });
});
wtApp.controller('ResetPasswordController', function ($scope) {
//    $("a[href$='reset-pwd']").css({ color: '#FF5733' });
});

function resetNavbar() {
    $(".navbar-collapse a").not("a[href='#']").each(function () {
        $(this).css({ 'color': 'black' })
    });
}

HTML manage-uploads.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Writer's Tryst - Manage Uploads</title>
    </head>
    <body>
        <h1>Manage Uploads</h1>
        <table>
            <tr>
                <th>Title</H><th>Type</th><th>Form</th><th>Genre</th><th>Length</th><th>PDF</t
            </tr>
            <tr>

                <td><input id="title" name="title" class="form-control"  placeholder="Title" required autofocus="true" /></td>
                <td>
                    <select id="work-type" name="work-type">
                        <option value="fiction">Fiction</option>
                        <option value="non-fiction">Non-Fiction</option>       
                    </select>
                </td>
                <td>
                    <select id="form-type" name="form-type">
                    </select>
                </td>
                <td>
                    <select id="genre" name="genre">
                    </select>            
                </td>
                <td><input id="nbrPages" name="nbrPages" required style="width: 48px" placeholder="Pages" /></td>
            </tr>
        </table>
        <script src="js/common.js"></script>
        <script src="js/manage-uploads.js"></script>
    </body>
</html>

Answer 1

您的路线是：/:manage-uploads。 :告诉Angular它应该在网址的该部分中预期一些值，并将其放在该名称下的$routeParams中。

所以结束网址不是/manage-uploads，而是像/33这样33将manage-uploads放在{"manage-uploads":"someValue"}下，例如：：

$id = $routeParams["manage-uploads"];

然后您将获得该值以获取该值

/manage-uploads

如果您打算使用实际网址:，那么只需删除SERVICE

为什么没有正确的表格加载？

1 个答案: