ng-click不会触发javascript全局函数

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

Answer 1

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

Answer 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.

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>