Call dynamic function from ng-click

Question

I have the following 2 functions/classes

function Availability(){    
    this.Click = function (){
        alert("Availability");
    }
}

function Help(){
    this.Click = function (){
        alert("Help");
    }
}

I've created the following module:

var Gadgetory = angular.module("Gadgetory", []);

and the following controller:

var ToolbarController = Gadgetory.controller('ToolbarController', ['$scope',
    function ($scope)
    {
        $scope.greeting = 'Gadgetory!';
        $scope.Gadgets = [
            { name: "Availability", icon: "available.png", object: new Availability() },
            { name: "Help", icon: "help.png", object: new Help() }
        ];
    }
]);

Now in my html I want to call the click method of each gadget in my dictionary, something like this:

<div ng-repeat="gadget in Gadgets">
    <img ng-src="/Gadgets/{{gadget.icon}}" ng-click="{{gadget.object}}.Click()"/>
</div>

but this fails to work, can you help me?

Answer 1

You shouldn't include {{ and }} instructions when calling a method — they are used when printing values to the screen or setting values to element attributes. For calling methods and manipulating data just use the plain JavaScript syntax:

<div ng-repeat="gadget in Gadgets">
    <img ng-src="/Gadgets/{{gadget.icon}}" ng-click="gadget.object.Click()"/>
</div>