AngularJS ng-click Directive Not Calling Function

Question

I'm trying to use ng-click to call a function in my controller, but I haven't been able to get that to work. I've stripped everything down to its simplest form, so that I now have this:

<button id="submitBtn" type="submit" class="btn btn-default"
  ng-click="count = count + 1; count = count + 2; alert('hello');" >Submit</button>

The first two statements (count = count + 1; count = count + 2;) execute just fine, but it won't call the alert function. When I take out the two count incrementing statements, the alert still won't work. Anytime I try to call a function, it fails, but plain old Javascript works.

(Just an FYI, I have Javascript down the page that prevents the form from submitting and triggering a postback).

Edit:

I'll include my controller's code for this:

myApp.controller('LawSearchController', ['$scope', function ($scope) {

    $scope.alert = function (text) {
        alert(text);
    };
}]);

This should work. So I guess the problem lies outside of the code posted here. The best thing to do is make a fiddle. (I will risk a wild guess: are you sure the scope of the button is really controlled by the given controller?) — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Feb 4, 2015 at 14:45
There's no reason it wouldn't be. Maybe there are too many working parts to figure this out. ASP.NET app with a bunch of different js libraries (jquery, angular, jquery.validate + other custom ones). — Connor
– Connor, Commented Feb 4, 2015 at 15:04

Code Whisperer · Accepted Answer · 2015-02-04 14:36:27Z

5

All functions you call in an ng-expression are in the context of $scope.

So when you say alert() it compiles to scope.alert() which is undefined, and fails silently.

In your controller, include the code

$scope.alert = alert

answered Feb 4, 2015 at 14:36

Code Whisperer

23.7k22 gold badges73 silver badges88 bronze badges

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

1 Comment

Connor Over a year ago

I had tried calling other functions in my controller and had no luck. I also tried putting your suggestion in my controller and it didn't work.

Ismailp · Accepted Answer · 2015-02-04 14:38:17Z

0

As one of the answeres pointed out, you need to have a function in your controller as such:

$scope.alert = function(arg) {
  // Do something
};

answered Feb 4, 2015 at 14:38

Ismailp

2,3934 gold badges38 silver badges67 bronze badges

Comments

Connor · Accepted Answer · 2015-02-04 15:18:50Z

0

For future reference, here was my issue:

I had tried placing my ng-controller directive with the <form> tag on my page. This is an asp.net application with a MasterPage, and (why, I don't know) the form gets replaced when creating the page with a new form that wraps all of the content. The result is that my ng-controller directive is gone.

I had also tried placing the ng-controller directive within the <asp:Content> tag, but that also gets removed.

The solution:

Wrap my page's <form> in a <div> and put the ng-controller directive there.

answered Feb 4, 2015 at 15:18

Connor

814 bronze badges

Comments

Delconis · Accepted Answer · 2015-04-17 20:21:05Z

I don't believe it's the intended use of the ngClick to contain a lot of javascript. You should only call 1 function in the NG click and that function should call the others

I belive it should be implemented more like the following as well I think you need to get the alert function from the root scope. or

HTML Snippit

<button id="submitBtn" type="submit" class="btn btn-default" ng-click="submitAndAlert()" >Submit</button>

Controller

myApp.controller('controllerName', ['$scope', '$rootScope', function ($scope, $rootScope) {
    $scope.count = 0;

    $scope.submitAndAlert = function(){
        count += 1;
        count += 2;
        alert('hello');
    }

    $scope.alert = function (text) {
        // $rootScope.window.alert(text);
        $rootScope.alert(text);
    };
}]);

Collectives™ on Stack Overflow

AngularJS ng-click Directive Not Calling Function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related