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

Question

我正在使用 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 路由。

Answer 1

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

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