ng-click does not fire javascript global function

Question

I'm new to AngularJS, and I've put an ng-click on a radio button generated by ng-repeat, and the click event refuses to fire. If I use a simple onclick, that does work though.

This works, and I see the alert:

<div class="span2 left-justify"
        ng-repeat="choice in physicalmode_choices">
    <input type="radio"
            name="physical_layer"
            value="{{ choice.private }}"
            onclick="alert('foo')"
            required
            ng-model="$parent.networkoptions.physicalmode" />
            &nbsp;<span ng-bind="choice.public"></span>
</div>

But this does not:

<div class="span2 left-justify"
        ng-repeat="choice in physicalmode_choices">
    <input type="radio"
            name="physical_layer"
            value="{{ choice.private }}"
            ng-click="alert('foo')"
            required
            ng-model="$parent.networkoptions.physicalmode" />
            &nbsp;<span ng-bind="choice.public"></span>
</div>

Can I not do this with an ng-click? Or am I misunderstanding what an "expression" is?

Thanks, Mike

Consider changing the title of this question, it doesn't describes the problem and its answer. Same problem would happen with any directive or structure, not only this one. Maybe something like ng-click doesn't recognise native javascript function — Eduardo Páez Rubio
– Eduardo Páez Rubio, Commented Aug 27, 2015 at 14:40

cakey · Accepted Answer · 2014-02-24 00:53:30Z

20

To clarify DerekR's answer.

When angular sees

ng-click='alert("test")'

it looks for

$scope.alert

which is likely to be undefined.

You need to provide a proxy method on the scope, or possibly even rootscope.

For example:

$rootScope.log = function(variable) {
    console.log(variable);
};
$rootScope.alert = function(text) {
    alert(text);
};

See: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED#scopemethods

answered Feb 24, 2014 at 0:53

cakey

3102 silver badges6 bronze badges

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

Comments

DerekR · Accepted Answer · 2013-05-25 09:38:25Z

2

When you call something inside of an ng-click the parsing service evaluates expressions against the scope rather than the global window object.

If you wanted to do an alert inside of an ng-click then could write a method on the scope or parent scope that in turn calls the alert.

edited May 25, 2013 at 9:38

answered May 25, 2013 at 1:15

DerekR

4,0062 gold badges25 silver badges25 bronze badges

Comments

Pablo · Accepted Answer · 2013-05-25 02:39:51Z

1

I created this jsFiddle to show how it works.

http://jsfiddle.net/tM56a/1/

<li ng-repeat="menu in menus" >
     <a ng-click="test(menu)">click me</a>
</li>

answered May 25, 2013 at 2:39

Pablo

2,5491 gold badge20 silver badges26 bronze badges

Collectives™ on Stack Overflow

ng-click does not fire javascript global function

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related