Ng-click global javascript function not working

Question

I am new to AngularJS and I put an ng-click on the radio button generated by ng-repeat and the click event does not fire. If I use simple onclick, it really works.

This works and I see a warning:

<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 is not so:

 <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 do this with ng-click? Or do I not understand what an "expression" is?

Thanks Mike

Answer 1

To clarify DerekR's answer.

When angular sees

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

He's looking for

 $scope.alert 

which is likely to be undefined.

You need to provide a proxy method in scope or perhaps even in root crops.

For instance:

 $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

Answer 2

When you call something inside ng-click, the parser evaluates the expressions in the scope, not in the global window object.

If you want to make a warning inside ng-click, then you can write a method in the scope or in the parent area, which in turn raises a warning.

Answer 3

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>