javascript - 停止 ng-view 内的 Angular 路由链接

标签 javascript jquery html angularjs

我正在使用 Angular JS 动态加载内容,如下所示:

HTML

  ...

  <div ng-controller="MainController">
    <div ng-view></div>
  </div>

</html>

Angular

(function(){

  var app = angular.module('app', ['ngRoute', 'ngAnimate']);

  app.config(function($routeProvider) {

    $routeProvider.when('/test', {
      templateUrl : 'views/test.html',
      controller  : 'MainController'
    });

  });

  app.controller('MainController', function($scope){ });

})();

这按预期工作。但是,在文件 test.html 中,我有一些带有 href="#" 的链接,需要使用 javascript 进行处理才能执行各种操作。目前,Angular 正在使用其路由方法来解释它们,并将它们视为主页的链接。我该如何阻止这种情况并按照我想要的方式处理链接?

示例 test.html 内容:

<a href="#" class="slideLeft">Left</a>
<a href="#" class="slideRight">Right</a>
<p>Test content</p>

在与 Angular 分开的 JS 文件中,我尝试过:

$('.slideLeft').on('click',function(){
  return false;
});

但它不会返回 false,它使用 Angular 路由。

最佳答案

您应该对所有绑定(bind)(包括事件绑定(bind))使用 Angular。不要使用.on('click') ,使用ng-click (或者 .bind 如果您确实需要它,但您可能不需要)。

您还可以从文档中看到 <a> directive does nothing if href is empty 。使用href=""而不是href="#"

关于javascript - 停止 ng-view 内的 Angular 路由链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25204647/

相关文章:

javascript - IE6 中嵌套 JSON 会导致问题

html - CSS:如何让无序列表之后的元素从新行开始?

javascript - 用户单击时更改输入的背景颜色

Javascript 千位分隔符/字符串格式

javascript - jQuery:将 JavaScript 移动到页面底部?

html - Bootstrap Collapse 折叠时显示子元素

JavaScript 不适用于计算器

javascript - javascript RegExp : same regular expressions produce different result 的奇怪行为

jquery - 将 json 数据转换为选择下拉选项

jquery - 在 jQuery Mobile 中提交 Ajax 表单。一个神话?