AngularJS - Angular 路由应用程序答案

【问题标题】：AngularJS - Angular Routing AppAngularJS - Angular 路由应用程序
【发布时间】：2016-04-14 22:20:54
【问题描述】：

我有一个 Angular 应用程序，在 main.js 文件中我定义了应用程序路由，但我有疑问，例如，当我点击下一个按钮时，我有一个引导菜单：

<a href="#MainMenu" data-toggle="collapse" data-parent="#MainMenu" class="dropdown-toggle"><img src="img/ico_menu_off.png" /></a>

由于 Angular 的配置路由，即属性 href="#MainMenu"，它会将其识别为路由，我不想做任何事情。

这是js代码：

angularRoutingApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })
        .when('/customerSearch', {
            templateUrl : 'pages/customer-search.html',
            controller  : 'customerSearchController'
        })      
        .otherwise({
            redirectTo: '/'
        });
});

如何解决这个问题？谢谢，（我是 Angular 的新手）

【问题讨论】：

您是否在应用配置中设置了$locationProvider.html5Mode(true)？

标签： angularjs angular-ui-bootstrap angular-ui angularjs-routing

【解决方案1】：

在您的情况下，您不应该使用href 属性来选择手风琴，因为它会在您使用锚点的href 时直接更改URL。要解决问题，您应该使用data-target 属性而不是href

标记

<a data-target="#MainMenu" data-toggle="collapse" data-parent="#MainMenu" class="dropdown-toggle">
   <img src="img/ico_menu_off.png" />
</a>

【讨论】：

【解决方案2】：

您可以删除 href 并在点击时使用 JavaScript 打开它：

$("#MainMenuTrigger").click(function(){
     $('#MainMenu').modal();
});

http://getbootstrap.com/javascript/#js-programmatic-api

我建议你也看看Angular UI Bootstrap。

【讨论】：

【解决方案3】：

您可以从 URL 中删除哈希。找到这个网址，它会帮助你 http://www.codeproject.com/Tips/1063634/Removing-the-sharp-Sign-from-AngularJS-URLs-with-I

【讨论】：