ron tornambe ron tornambe - 2 years ago 119
jQuery Question

Why doesn't the correct form load?

I have a bootstrap dropdown menu that should be displayed by an angular route, but even though the browser URL is pointing to the correct route, the wrong form is shown. I am fairly new to angular and bootstrap.

The console.log does not show any errors.

If you are going to downvote this question, please provide a reason so I can learn from my mistakes.

enter image description here

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>

Angular routes / controllers (see manage-uploads - the manage-uploads.html exists)

var wtApp = angular.module('wtApp', ['ngRoute'])
// configure our routes
wtApp.config(function ($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'};

wtApp.controller('writersController', function($scope) {

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 }


wtApp.controller('aboutController', function($scope) {
wtApp.controller('contactController', function($scope) {
wtApp.controller('loginController', function ($scope) {
$("a[href$='log-in']").css({ color: '#FF5733' });
wtApp.controller('createAccountController', function ($scope) {
$("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">
<meta charset="utf-8" />
<title>Writer's Tryst - Manage Uploads</title>
<h1>Manage Uploads</h1>

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

Answer Source

Your route is: /:manage-uploads. The : is telling Angular that it should expect some value in that part of the url and to place it in the $routeParams under that name.

So the end url isn't /manage-uploads but something like: /33 where 33 would be be put in $routeParams under manage-uploads, eg:


Which you would then access to get that value

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

If you meant to make it use the actual url /manage-uploads then just remove the :

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download