Dynamic function call 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 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 for 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 will not work, can you help me?

Answer 1

You should not include instructions {{ and }} when calling the method - they are used when printing values ​​on the screen or setting values ​​for element attributes. To call methods and manage data, just use simple JavaScript syntax:

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