ng-click not calling my controller function

Question

I've read lot of question with same text but none helped me, so I ask a new one.

I have a ng-app, ng-controller.

<div ng-app='mainApp'>
<div ng-init='period=".$_REQUEST['period']."' ng-controller='debtController'>

Then, some lines bellow, define them.

<script type='text/javascript'>
    var app = angular.module('mainApp', []);                               
        app.controller('debtController', function(){
            openDebt = function(period){
                console.log(period);
            }
    });
</script>

And last but not least, a ng-click that calls the function defined.

<a href="#" ng-click="openDebt('{{period}}')" />+</a>

So, if I click the '+' with the ng-click, nothing happens. But if I check the HTML there, and copy the text inside the ng-click, and then paste it in the console, it works. Why the function is not being called?

Anyone got any ideas?

see the code i have for the script.

Sunil Lama
– Sunil Lama

2016-02-26 18:58:43 +00:00
Commented Feb 26, 2016 at 18:58 — Sunil Lama
– Sunil Lama, Commented Feb 26, 2016 at 18:58

Gonzalo Pincheira Arancibia · Accepted Answer · 2016-02-26 18:59:33Z

1

Best approach

Notice the assyntax. This create an alias for the controller

<div ng-init='period=".$_REQUEST['period']."' ng-controller='debtController as debt'>

change the ng-click asociated to controller alias

<a href="#" ng-click="debt.openDebt('period')" />+</a>

In the controller code using this for associate the controller with the html

var app = angular.module('mainApp', []);                               
        app.controller('debtController', function(){
            this.openDebt = function(period){
                console.log(period);
            }
    });

answered Feb 26, 2016 at 18:59

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2016-02-26 18:54:29Z

1

You can simply pass the variable without an expression

Change From:

<a href="#" ng-click="openDebt('{{period}}')" />+</a>

To:

<a href="#" ng-click="openDebt(period)" />+</a>

answered Feb 26, 2016 at 18:54

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

4 Comments

AleOtero93 Over a year ago

didn't know that, thanks. Althought that doesn't solve the problem

Sajeetharan Over a year ago

what is the issue now?

AleOtero93 Over a year ago

The same, the function is not called but the function works... And if I copy th ng-click text in console it works.

Sunil Lama Over a year ago

you need to inject scope or create an alias, see how i am injecting scope before using scope. function($scope)

Sunil Lama · Accepted Answer · 2016-02-26 19:08:29Z

0

Okay first embed the openDebt to scope inside the controller: $scope.openDebt. Second while in ng-click, you don't need handlebar to pass the value.

<script type='text/javascript'>
    var app = angular.module('mainApp', []);                               
        app.controller('debtController', function($scope){
           $scope.openDebt = function(period){
                console.log(period);
            }
    });
</script>

HTML:

<a href="#" ng-click="openDebt(period)" />+</a>

PLUNKER EXAMPLE: http://plnkr.co/edit/OyhBWkrREtt2JT2IWuVN?p=preview

edited Feb 26, 2016 at 19:08

answered Feb 26, 2016 at 18:54

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

7 Comments

Sunil Lama Over a year ago

app.controller('debtController', function($scope){

Sunil Lama Over a year ago

see there function($scope)

Ariel Over a year ago

If $scope is giving you error, perhaps you are minifying it, and breaks it, look how to inject correctly for minified js in angularjs: docs.angularjs.org/guide/di

AleOtero93 Over a year ago

Did that but console sends error with injector problem and stops angular from working

Sunil Lama Over a year ago

see the plunker. i said you using alias can also solve the problem :) Neway cheers that it is solved.

|

Collectives™ on Stack Overflow

ng-click not calling my controller function

3 Answers 3

Comments

4 Comments

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

7 Comments

Related