AngularJS : ng-click not working
Solution 1
Have a look at this plunker
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="[email protected]" data-semver="1.3.0-beta.16" src="https://code.angularjs.org/1.3.0-beta.16/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="FollowsController">
<div class="row" ng:repeat="follower in myform.all_followers">
<ons-col class="views-row" size="50" ng-repeat="data in follower">
<img ng-src="http://dealsscanner.com/obaidtnc/plugmug/uploads/{{data.token}}/thumbnail/{{data.Path}}" alt="{{data.fname}}" ng-click="showDetail2(data.token)" />
<h3 class="title" ng-click="showDetail2('ss')">{{data.fname}}</h3>
</ons-col>
</div>
</body>
</html>
Javascript:
var app = angular.module('app', []);
//Follows Controller
app.controller('FollowsController', function($scope, $http) {
var ukey = window.localStorage.ukey;
//alert(dataFromServer);
$scope.showDetail = function(index) {
profileusertoken = index;
$scope.ons.navigator.pushPage('profile.html');
}
function showDetail2(index) {
alert("here");
}
$scope.showDetail2 = showDetail2;
$scope.myform ={};
$scope.myform.reports ="";
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
var dataObject = "usertoken="+ukey;
//var responsePromise = $http.post("follows/", dataObject,{});
//responsePromise.success(function(dataFromServer, status, headers, config) {
$scope.myform.all_followers = [[{fname: "blah"}, {fname: "blah"}, {fname: "blah"}, {fname: "blah"}]];
});
Solution 2
Just add the function reference to the $scope in the controller:
for example if you want the function MyFunction to work in ng-click just add to the controller:
app.controller("MyController", ["$scope", function($scope) {
$scope.MyFunction = MyFunction;
}]);
Solution 3
It just happend to me. I solved the problem by tracing backward from the point ng-click is coded. Found out that an extra
</div>
was placed in the html to prematurely close the div block that contains the ng-click.
Removed the extra
</div>
then everything is working fine.
Solution 4
For ng-click working properly you need define your controller after angularjs script binding and use it via $scope.
Solution 5
i tried using the same ng-click for two elements with same name showDetail2('abc')
it is working for me . can you check rest of the code which may be breaking you to move further.
Related videos on Youtube
Syed ObaidUllah Naqvi
Updated on July 09, 2022Comments
-
Syed ObaidUllah Naqvi almost 2 years
I am new in AngularJs, ng-click is not working as expected. I searched on the internet , Follow the tutorial , (that was working) - but this is not working!!!
My Code:
<div class="row" ng:repeat="follower in myform.all_followers | partition:2"> <ons-col class="views-row" size="50" ng-repeat="data in follower" > <img ng-src="http://dealsscanner.com/obaidtnc/plugmug/uploads/{{data.token}}/thumbnail/{{data.Path}}" alt="{{data.fname}}" ng-click="showDetail2(data.token)"/> <h3 class="title" ng-click="showDetail2('ss')">{{data.fname}}</h3> </ons-col> </div>
Here is my controller
//Follows Controller app.controller('FollowsController', function($scope, $http) { var ukey = window.localStorage.ukey; $scope.myform ={}; $scope.myform.reports =""; $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; var dataObject = "usertoken="+ukey; var responsePromise = $http.post(server_url+"follows/", dataObject,{}); responsePromise.success(function(dataFromServer, status, headers, config) { $scope.myform.all_followers = dataFromServer; console.log(dataFromServer); //alert(dataFromServer); $scope.showDetail = function(index) { profileusertoken = index; $scope.ons.navigator.pushPage('profile.html'); } function showDetail2(index) { alert("here"); } $scope.showDetail2 = showDetail2; }); });
Niether showDetail working nor showDetail2 Please help Thanks
-
dfsq over 9 yearsDefine "not working".
-
desbo over 9 yearsWhich element did you bind your controller to? Don't forget
ng-repeat
creates its own scope. -
bmleite over 9 yearsCheck if
ons-col
directive is not creating its own isolate scope. If that's the case, theshowDetail2
function will not be available. (Quick test, set theng-click
on the<div>
and see if it works)
-
-
Vaibhav almost 8 yearsI was using ng-controller="MyController as ctrl"... and then ctrl.doSomething(). Removing the ctrl thing and using the method directly, as you did, worked. Thanks.
-
Wawy almost 8 years@Vaibhav The format you were using will only work if you assign the methods to the
this
object of your function and not$scope
directly. -
dewd almost 2 yearsnine one for coming back to explain