Question

我在html中的 bootstap 模板中使用 ng-app 。

当我点击分配给模态的链接时，该位置更改为page.html＃/ contact

因此，当我在页面中使用路线时，页面的 ng-view 正在发生变化。

有没有办法让页面位置不变？

<li> <a href="#contact" data-toggle="modal">Contact Us</a></li>
<div class="modal fade" id="contact" role="dialog" tabindex="-1">
<div class="modal-dialog  modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>Video</h4>
</div>
</div>
</div>
<script type="text/javascript">

mySite.config(function($routeProvider){
  $routeProvider
    .when('/',{
      templateUrl : "grid.jsp",
      controller :'homeController'
    })
    .when('/Videos',{
      templateUrl : "Videos/grid.jsp",
      controller : 'alluserCtrl'
    })
    .when('/user/current',{
      templateUrl : "userDetails.html",
      controller : "userDetailsCtrl"
    });
});
</script>

Answer 1

This blog entry提供了一个指令示例，该指令消除了对data-toggle的需求，并将其替换为ng-click以及一些javascript代码来显示/隐藏模态。

Answer 2

也许您可以尝试以html5模式传递路线，它会删除＃符号，因为模态正在使用，您可能无法重定向。

$locationProvider.html5Mode(true);

您还可以收听$routeChangeStart事件并阻止重定向的默认行为（如果它与模式的“路线”对应）。

Answer 3

我没有使用href属性，而是使用了数据目标： - ）

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

如果单击模态，则页面重定向为角度

3 个答案: