Question

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

HTML

  ...

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

</html>

角

(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

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

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

Answer 2

在anchor属性中使用href="javascript:void(0)"，您也应该使用ngClick而不是使用jQuery绑定元素。

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

2 个答案: