Why isnt this drop down populating with working links?

Question

I am studying bootstrap by making changes to examples. The drop down menu that I am trying to create should have three links. The main tab should link to someroute, while the two links that are revealed by the drop down menu should let users click to route3 and route4 respectively. But instead there is a dead link where there should be three working links. What specific changes need to be made to the code below to make all four links in the menu bar work, including the three in the drop down?

Here is a plnkr that recreates the problem including the code below.

Here is index.html, which includes the bootstrap code for the drop down menu:

<!DOCTYPE html>
<html>  
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet"/>
    <style type="text/css">
    [ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; }
    </style>
  </head>
  <body class="ng-cloak" ng-cloak="" ng-app="hello">
    <div class="container" ng-controller="navigation">
        <ul class="nav nav-pills" role="tablist">
            <li ng-class="{active:tab('home')}"><a href="/">Home</a></li>
            <li class="dropdown">
                <a ng-class="{active:tab('someroute')}" class="dropdown-toggle" data-toggle="dropdown" href="/someroute">Some route
                <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li ng-class="{active:tab('route3')}"><a href="/route3">route three</a></li>
                    <li ng-class="{active:tab('route4')}"><a href="/route4">route four</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="container" ng-view=""></div>
    <script type="text/javascript" src="home.js"></script>
    <script type="text/javascript" src="someroute.js"></script>
    <script type="text/javascript" src="navigation.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

score 1 · Accepted Answer · answered Feb 02 '16 at 01:33

1

You are missing Bootstrap's JS files in your example, and also JQuery, which is required by bootstrap... try adding the following to your <head>:

<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

answered Feb 02 '16 at 01:33

jcane86

681
4
17

This change, in addition to adding `#` as suggested by another user's deleted answer, solved the problem. See updated plnkr: http://plnkr.co/edit/T96QWX1uEccH34l2Ievt?p=preview – CodeMed Feb 02 '16 at 01:40
Are you willing to comment on how to get the drop down to appear on hover instead of just on click? That would save a separate posting. Thank you and +1. – CodeMed Feb 02 '16 at 01:42
Sure, seems bootstrap doesn't support it by default, but the first answer here gives a pretty simple solution to do it yourself: http://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover – jcane86 Feb 02 '16 at 01:48

score 0 · Answer 2 · answered Feb 02 '16 at 01:34

You have a few problems here:

You are using html5Mode on plnkr.co, which in my experience doesn't work with routing because the app preview is served in an iframe
You are including Bootstrap's CSS but not its JavaScript (for Angular, you want to use UI Bootstrap instead)
When using UI Bootstrap, you need to use the custom directives uib-dropdown, uib-dropdown-toggle, and uib-dropdown-menu instead of those classes, because Angular uses directives to deal with DOM elements, not class selectors

Here is a working example: plnkr.co

Why isnt this drop down populating with working links?

2 Answers2