Question

我正在尝试单击带有angularjs的链接，但单击时没有响应单击事件。单击锚链接时没有任何反应。这是angularjs脚本标记的片段

<script data-require="angular.js@1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
        <script type="text/javascript">
    angular.module("module",[])
.controller("controller",function($scope){

  $scope.func =function(){
    alert('clicked me');
  }

})</script>

我正在以这种方式应用点击，但它没有响应点击事件

<div ng-app="module" ng-controller="controller" class="separator clear-left">
    <p class="btn-add">
        <i class="fa fa-shopping-cart"></i>
        <a href="#" id="click" class="hidden-sm add" id-data="1">Add to cart</a>
        <br>
        <a ng-click="func()" href="#">Take me there</a> <!-- area of problem -->
    </p>
    <p class="btn-details">
        <i class="fa fa-list"></i><a href="#" class="hidden-sm detail">More details</a>
    </p>
</div>

为什么使用angularjs

不会发生点击事件

Answer 1

以上电缆没有任何问题。可能你可以比较看看

<强>演示

＆＃13;

  angular.module("module",[])
.controller("controller",function($scope){

  $scope.func =function(){
    alert('clicked me');
  }

})

＆＃13;

<script data-require="angular.js@1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
 <div ng-app="module" ng-controller="controller" class="separator clear-left">
    <p class="btn-add">
        <i class="fa fa-shopping-cart"></i>
        <a href="#" id="click" class="hidden-sm add" id-data="1">Add to cart</a>
        <br>
        <a ng-click="func()" href="#">Take me there</a> <!-- area of problem -->
    </p>
    <p class="btn-details">
        <i class="fa fa-list"></i><a href="#" class="hidden-sm detail">More details</a>
    </p>
</div>

＆＃13;

Answer 2

我刚创建了一个jsbin。有用 https://jsbin.com/hifujod/edit?html,js,console,output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div ng-app="module" ng-controller="controller" class="separator clear-left">
    <p class="btn-add">
        <i class="fa fa-shopping-cart"></i>
        <a href="#" id="click" class="hidden-sm add" id-data="1">Add to cart</a>
        <br>
        <a ng-click="func()" href="#">Take me there</a> <!-- area of problem -->
    </p>
    <p class="btn-details">
        <i class="fa fa-list"></i><a href="#" class="hidden-sm detail">More details</a>
    </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

</body>
</html>

的javascript

 angular.module("module",[])
.controller("controller",function($scope){

  $scope.func =function(){
    alert('clicked me');

  }
 })

Answer 3

它工作正常。检查你的CSS，因为可能是css覆盖元素。

＆＃13;

angular.module("mainApp",[])
.controller("ctrl",function($scope){
  $scope.func =function(){
    console.log('Hi!');
  }
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
 <div ng-app="mainApp" ng-controller="ctrl" class="separator clear-left">
    <p class="btn-add">
    <i class="fa fa-shopping-cart"></i>
    <a href="#" id="click" class="hidden-sm add" id-data="1">Add to cart</a>    
   <a ng-click="func()" href="#">Take me there</a>
    </p>
    <p class="btn-details">
        <i class="fa fa-list"></i><a href="#" class="hidden-sm detail">More details</a>
    </p>
</div>

＆＃13;

Answer 4

修改下面的行，如此处所述并试一试

<a ng-click="func()" href="">Take me there</a>

单击angularjs没有响应click的链接

4 个答案: