角度路由在自定义菜单指令中不起作用

Question

由于菜单来自指令，我很难路由到特定网址。以下是代码：

路线：

var myApp = angular.module('myApp', ['ngRoute', 'mainMenu']);

myApp.config(function($routeProvider){
        $routeProvider
            .when('/', {
                templateUrl: 'pages/main.html'    
            })
            .when('/home', {
                templateUrl: 'pages/home.html'    
            })
            .when('/bollywoodGossips', {
                templateUrl: 'pages/bollywoodGossip.html'    
            })
            .when('/bollywoodNews', {
                templateUrl: 'pages/bollywoodNews.html'    
            })
            .when('/bollywoodEvents', {
                templateUrl: 'pages/bollywoodEvents.html'    
            })
            .when('/bollywoodFitness', {
                templateUrl: 'pages/bollywoodFitness.html'    
            })
            .when('/bollywoodWallpaper', {
                templateUrl: 'pages/bollywoodWallpaper.html'    
            })
            .otherwise('/', {
                templateUrl: 'pages/main.html'    
            })
    })

指令：

(function(){

    var mainMenu = angular.module('mainMenu', []);

    var newMenu = function($location) {

        var link = function(scope, element, attrs) {
            element.parent('a.menuBtn').click(function(){
                element.toggleClass('test');
            });


        }

        return {
          restrict: 'E',
          replace: true,
          templateUrl: 'pages/directiveTemplate/menu.html',    
          link: link    
        }
    }

    newMenu.$inject = ['$location'];

    mainMenu.directive('newMenu', newMenu);

}());

菜单模板：

<ul class="dropdownMenu">
    <li><a href="#/bollywoodGossips">Bollywood Gossip</a></li>
    <li><a href="#/bollywoodNews">Bollywood News</a></li>
    <li><a href="#/bollywoodEvents">Events</a></li>
    <li><a href="#/bollywoodFitness">Celeb fitness Mantra</a></li>
    <li><a href="#/bollywoodWallpaper">Celeb Wallpapers</a></li>
</ul>

和html：

<div class="mainMenu">
        <p>
            <a href="#/home"><span class="breadCrumb">Home</span></a>
            <a href="" class="menuBtn">Menu&nbsp;&nbsp;<span class="glyphicon glyphicon-th-large"></span>
                <new-menu></new-menu>
            </a>
        </p>           
    </div>

索引文件：

<div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <div class="mainHeader">
                        <img src="imgs/mainHeader.jpg" alt="" class="img-responsive">
                    </div>
                </div>
            </div>
            <div ng-view></div>            


            <div class="row">
                <div class="col-xs-12">
                    <div class="footer">
                        <p>&copy;2016 All rights reserved. NAYSA VAS Communications Pvt.Ltd.</p>
                    </div>
                </div>
            </div>            
        </div>

这会正确呈现，但是当我点击菜单中的任何链接时，它都不会路由到该特定网址。例如＃/ bollywoodGossips。应该去index.html＃/ bollywoodGossips，但它不是路由并仍然在index.html＃/ home。请帮助我不熟悉指令..