使用引导程序时关闭 $routeprovider答案

【问题标题】：Turning off $routeprovider when using bootstrap使用引导程序时关闭 $routeprovider
【发布时间】：2014-05-16 14:56:18
【问题描述】：

我有一些普通的 routeprovider 代码，但在我的 HTML 的某个部分中，我有一些 twitter bootstrap 展开/折叠部分。单击它们会触发路由提供程序，我不想这样做。有没有办法防止这种情况发生？

myApp.config(function ($routeProvider, $locationProvider) {

  $routeProvider
    .when('/', {
      templateUrl: 'login.html',
      controller: 'mainController'
    })
    .when('/projects', {
      templateUrl: 'project.html',
      controller: 'projectController'
    });

  $locationProvider.html5Mode(true);
});

HTML 的一部分

<div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                              Open Projects
                          </a>
                      </h4>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <table id="openProjectTable" class="table">
                            <tr><th>Project</th><th>Source</th><th>Target</th></tr>
                        </table>
                    </div>
                </div>
            </div>

【问题讨论】：

你能给我们看看 html/bootstrap 代码吗？
好的，但它并没有增加太多。当点击“打开项目”链接时，它会像我说的那样刷新页面。
也许你应该切换到UI Bootstrap。我想href="#collapseOne" 被检测为路由更改。如果您正确使用 UI Bootstrap，则不会发生这种情况。

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

最简单的解决方案是使用 data-target 而不是 href：

<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
  Open Projects
</a>

演示： http://plnkr.co/edit/OYEeUd6hAJE0hBBJOrp7?p=preview

【讨论】：

谢谢，这是实现它的最简单方法。