Warum lädt das richtige Formular nicht?

Question

Ich habe ein Bootstrap-Dropdown-Menü, das durch eine eckige Route angezeigt werden sollte, aber obwohl die Browser-URL auf die richtige Route zeigt, wird das falsche Formular angezeigt. Ich bin ziemlich neu in eckigen und bootstrap.

Die console.log zeigt keine Fehler.

Wenn Sie diese Frage ablehnen, geben Sie bitte einen Grund an, damit ich aus meinen Fehlern lernen kann.

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 Routen/Controller (siehe verwalten-Uploads - das Manage-uploads.html existiert)

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 verwalten-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

Ihre Route ist: /:manage-uploads. Die : sagt Angular, dass es einen Wert in diesem Teil der URL erwarten und in den $routeParams unter diesem Namen platzieren sollte.

Also das Ende URL ist nicht /manage-uploads aber so etwas wie: /33 wo 33 würde in $routeParams unter manage-uploads gestellt werden, wie zB:

{"manage-uploads":"someValue"} 

die Sie dann diesen Wert zugreifen würden

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

zu erhalten

Wenn Sie die tatsächliche URL /manage-uploads verwenden möchten, dann entfernen Sie einfach die :