为什么没有正确的表单加载？答案

【问题标题】：Why doesn't the correct form load?为什么没有正确的表单加载？
【发布时间】：2016-05-26 05:06:24
【问题描述】：

我有一个引导下拉菜单，应该通过角度路由显示，但即使浏览器 URL 指向正确的路由，也会显示错误的形式。我对角度和引导程序相当陌生。

console.log 没有显示任何错误。

如果您要否决这个问题，请提供一个理由，以便我可以从错误中吸取教训。

引导下拉菜单：

    <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 管理上传.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>

【问题讨论】：

您的 html 中是否有 ng-view 来加载下拉列表？
下拉列表在主 index.html 文件中定义。这是一个全局菜单下拉菜单。
你说显示错误的表格？所以这意味着它正在显示一个表格，对吧？如果是这样，控制台中不会出现错误，为什么操作显示什么表单？

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

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

所以结束网址不是/manage-uploads，而是类似：/33，其中33 将放在$routeParams 下manage-uploads，例如：

{"manage-uploads":"someValue"}

然后您将访问它以获取该值

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

如果您打算让它使用实际的 URL /manage-uploads，那么只需删除 :

【讨论】：

非常感谢！我可以指导您解决一个涉及角度多选指令的更令人费解的问题吗？