2017-04-11 82 views
0

我想点击一个与angularjs的链接,但它没有响应点击单击事件。点击锚链接时什么也没有发生。这是angularjs脚本标签点击一个链接与angularjs没有响应点击

<script data-require="[email protected]" 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

+0

尝试的console.log。如果console.log显示值,请检查窗口上的警报是否被阻止。 @parker –

+0

可能是你的CSS覆盖。检查你的按钮css。 –

回答

0

线上工作ks没有任何问题。也许你可以比较看看

演示

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

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

 
})
<script data-require="[email protected]" 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>

+0

将它添加到页面链接已被清除不知道脚本是否阻止它被点击 – parker

+0

@parker添加到哪个页面? – Sajeetharan

+0

您的答案中的代码片段“ – parker

-2

没有发生修改如下所述的线路并试一试

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

我刚刚创建了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'); 

    } 
}) 
+0

加入它的页面链接灰显 – parker

+0

你正在尝试jsbin吗? –

0

它的工作fine.Check你的CSS,因为可能是CSS覆盖的元素。

angular.module("mainApp",[]) 
 
.controller("ctrl",function($scope){ 
 
    $scope.func =function(){ 
 
    console.log('Hi!'); 
 
    } 
 
});
<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>

+0

如何使用CSS来防止超限 – parker

+0

只需检查并检查它。天气的任何元素是否被覆盖。 –

+0

首先删除相关的CSS类并检查点击fuc –