AngularJS : ng-click not working

Question

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

Which element did you bind your controller to? Don't forget ng-repeat creates its own scope. — desbo
– desbo, Commented Aug 21, 2014 at 9:22
Check if ons-col directive is not creating its own isolate scope. If that's the case, the showDetail2 function will not be available. (Quick test, set the ng-click on the <div> and see if it works) — bmleite
– bmleite, Commented Aug 21, 2014 at 9:27

Doron Saar · Accepted Answer · 2016-03-29 11:50:55Z

12

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;
}]);

answered Mar 29, 2016 at 11:50

Doron Saar

4865 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel C. Deng · Accepted Answer · 2016-10-01 00:13:43Z

8

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.

answered Oct 1, 2016 at 0:13

Daniel C. Deng

1,58913 silver badges8 bronze badges

Comments

Max · Accepted Answer · 2017-09-21 15:06:28Z

5

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"}]];
});

edited Sep 21, 2017 at 15:06

Max

99312 silver badges28 bronze badges

answered Aug 21, 2014 at 9:29

Wawy

6,2692 gold badges26 silver badges24 bronze badges

2 Comments

Vaibhav Over a year ago

I 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 Over a year ago

@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.

bummi · Accepted Answer · 2015-01-04 09:58:58Z

3

For ng-click working properly you need define your controller after angularjs script binding and use it via $scope.

edited Jan 4, 2015 at 9:58

bummi

27.4k14 gold badges67 silver badges105 bronze badges

answered Jan 4, 2015 at 8:24

Kirill Shur

2902 silver badges4 bronze badges

Comments

Dilip Tirumala · Accepted Answer · 2014-08-21 10:11:07Z

1

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.

here is the sample jsfiddle i tried:

answered Aug 21, 2014 at 10:11

Dilip Tirumala

3711 silver badge10 bronze badges

Comments

Zaid Pathan · Accepted Answer · 2021-03-27 12:49:37Z

1

My actual component wasn't visible due to *ngIf, and I was clicking on another component and expecting click to work. This can happen if you copy/paste code or work on existing code after long.

answered Mar 27, 2021 at 12:49

Zaid Pathan

16.9k7 gold badges105 silver badges135 bronze badges

Collectives™ on Stack Overflow

AngularJS : ng-click not working

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related