CODEWITHSUNDEEP
javascriptangularjs
Alexandre LEBRUN
Alexandre LEBRUN

Reputation: 69

ng-click does not work

I'm programming a single-page web application, mostly using the AngularJS framework, and am encountering a problem while using the ng-click directive.

This directive actually does nothing upon click. The linked method is not called (I can't debug it).

Below the code in question:

template file: 

<div ng-controller="BonusCtrl as bonusManager">

<!-- [...] --> 
<button style="margin-top: 5px" 
class="btn btn-success" ng-click="add()"><i class="fa fa-plus"/> Règle de calcul</button>

<!-- [...] -->

</div>

controller: 

idServerApp.controller('BonusCtrl', ['$scope', 'webService', 'math', 'DATERANGE_OPTIONS', function ($scope, webService, math, DATERANGE_OPTIONS) {

$scope.add = function() {
    console.log('foo'); // no call
    var newItem = {
        brandId: undefined,
        days: 0,
        priceMinEVAT: 0,
        bonus: 0
    };
    $scope.rules.push(newItem);
};

Do you have any idea of the problem?

Edit 1

I tried to replace bonusManager.add() by add() and BonusCtrl.add(). I then tried to replace $scope by this, or to remove the controllerAs.

Complete JSFiddle (using some of my services)

Edit 2

Thanks for your answers. I found the solution myself, and it was crappy. I forgot a closing div tag in the HTML template, so the controller was not defined.

Upvotes: 2

Views: 163

Answers (4)

Joy
Joy

Reputation: 9550

Check the working demo: JSFidde

You are using <div ng-controller="BonusCtrl as bonusManager">, so call it like:

 <button style="margin-top: 5px" class="btn btn-success" 
    ng-submit="bonusManager.add()"><i class="fa fa-plus"/> Règle de calcul</button>

In the controller, define this.add = function() {... instead of $scope.add = function() {.... Because the keyword as will call a new BonusCtrl() under the hood.

Upvotes: 1

Michael Money
Michael Money

Reputation: 2449

I get your code and made an running example with two cases.

First one using BonusCtrl

$scope.add = function () {...}

ng-click="add()"

And second with bonusManager

this.add = function () {...}

ng-click="bonusManager.add()"

For me it should works just fine. Please let me know if you have any other issues.

var app = angular.module('myapp',[]);
app.controller('BonusCtrl', ['$scope', function ($scope) {
    

$scope.add = function() {
    console.log('Hey you\'ve just invoked add() function!'); // no call
    var newItem = {
        brandId: undefined,
        days: 0,
        priceMinEVAT: 0,
        bonus: 0
    };
  };

  this.add = function () {
    console.log('You can invoke function using \' bonusManager.add()'); // no call
  };

}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <h1>NG-CLICK EXAMPLE</h1>
    <div ng-controller="BonusCtrl as bonusManager">
    
    <button style="margin-top: 5px" 
    class="btn btn-success" ng-click="add()"><i class="fa fa-plus"/>add()</button>

  <button style="margin-top: 5px" 
    class="btn btn-success" ng-click="bonusManager.add()"><i class="fa fa-plus"/> bounsManager.add()</button>
    </div>
</div>

However you can always use your

Upvotes: 2

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

If you are using BonusCtrl as bonusManager then do as follows

Update bonusManager.add() in view and in controller write this.add instead of $scope.add() .

Otherwise just remove as bonusManager from ng -controller syntax .it will work fine.

Upvotes: 0

Odinn
Odinn

Reputation: 1106

If you use $scope than you don't need construction ControllerAs, just use

<div ng-controller="BonusCtrl">

and submit function ng-submit="add()"

Or if you want to use ControllerAs, than use "this":

<div ng-controller="BonusCtrl as bonusManager">
ng-submit="BonusCtrl.add()"

But in your controller have to be "this" instead of $scope: `

this.add = function() {

`

Try it.

Upvotes: 0

Related Questions