AngularJS 和 Bootstrap：单击模式时禁止重定向

Question

我的导航栏中有一个 "Contact" link 设置为在单击时将表单作为模态打开。这是使用 Bootstrap。最近我决定向我的网站添加一些 AngularJS 路由，它对所有 link 都非常有效，除了这个。我的路由配置如下所示：

asApp.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'pages/about.html',
                controller  : 'aboutController'
            })

            // route otherwise
            .otherwise({
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            });

    });

因为我没有联系表单的专用页面（它意味着以模式打开），所以我没有在上面的代码中为“/contact”添加任何特定的路由，这就是点击它的原因link 触发 "route otherwise" 块并重定向打开主页。有什么方法可以仅针对 "Contact" link 抑制此路由？我希望它保留在单击 link 并打开模式时打开的页面上。不确定我是否足够连贯，所以如果您迷路了，请随时问我。

如果有帮助，这里是模式片段以及一些其他相关的 HTML 部分：

/* Navbar snippet */
<div class="collapse navbar-collapse" ng-controller="HeaderController">
            <ul class="nav navbar-nav navbar-right">
                <li ng-class="{ active: isActive('/about')}"><a href="#about">About</a></li>
                <li ng-class="{ active: isActive('/blog')}"><a href="#blog">Blog</a></li>
                <li><a href="#contact" data-toggle="modal">Contact</a></li>
            </ul>
        </div>

/* Main body snippet */
<div id="main"><div ng-view></div></div>

/* Modal snippet */
<div class="modal fade" id="contact" role="dialog">
  <div class="modal-dialog">
    /* Contact form code here... */
   </div>
</div>

非常感谢您的关注和帮助。

Answer 1

您可以尝试 data-target 不要弄乱 angular 路线（url 在 # 之后）

<a href data-target="#contact" data-toggle="modal">Contact</a>

Answer 2

angularUI 团队有一个很棒的模块 ui.bootstrap，用于将 angular 与 bootstrap 一起使用：

https://angular-ui.github.io/bootstrap/

它有一个 $modal 服务来处理作为模态的打开视图。

但是，如果您不想使用它，可以尝试以下操作：

最简单的解决方案是不要将 contact 作为锚标记。

改用 div 和 ng-click。

即代替<li><a href="#contact" data-toggle="modal">Contact</a></li>

使用<li><div class="contact-modal" ng-click="functionThatOpensModal()">Contact</div></li>

您可以设置此特定 div 的样式，使其看起来与其他链接相同。

希望对您有所帮助

AngularJS 和 Bootstrap：单击模式时禁止重定向

AngularJS with Bootstrap: Suppress redirect when clicking a modal

routes

modal-dialog

twitter-bootstrap

angularjs

angular-ui-router