Javascript: Funktion in Funktion - wie am besten?

[esperance]

Hallo

Ich habe momentan ein kleines Projekt mit folgendem Aufbau:

- diverse Javaklassen

- HTML-Datein

- app.js

Das ganze hab ich erstmal mit Springboot zum laufen gebracht. Soo, das eigentliche Problem ist jedoch folgendes:

ich habe auf meiner index.html eine Map kreiert, welche beim click die Funktion "executeCommand" durchführen soll.

"executeCommand" muss jedoch wissen, welche ID ich dem click zugeordnet habe.

Mein Ansatz dafür sieht wiefolgt aus:

App.js

...

function idControl(){

if (document.getElementById("up"){

    $scope.ctl = { ctl: 's'};

} else if (document.getElementById("left") {

   $scope.ctl = { ctl: 'a'};

} else if (document.getElementById("down") {

      $scope.ctl = { ctl: 's'};

}else if (document.getElementById("right"){

    $scope.ctl = { ctl: 'd'};}}


        $scope.executeCommand = function() {

            console.info('executeCommand()');

            resource.save(idControl(), function(data){

                console.info('success');

            });

        }

    });

index.html

...

                <div ng-app="launcherApplication" ng-controller="launcherWebController">

                    <img id="controller" src="gameboy.png" alt="retro gameboycontroller" usemap="#gameboymap">

                    <map name="gameboymap">

                        <area id="left" ng-click="executeCommand()" alt="left" title="left"

                              href="javascript:console.log('left button pressed')" ng-model="command"

                              shape="rect"

                              coords="95,189,80,204"/>

                        <area id="up" ng-click="executeCommand()" alt="up" title="up"

                              href="javascript:console.log('up button pressed')" shape="rect"

                              coords="94,174,108,186"

                              style="outline:none;" target="_self"/>

                        <area id="right" ng-click="executeCommand()" alt="right" title="right"

                              href="javascript:console.log('right button pressed')"

                              shape="rect"

                              coords="123,186,109,199"

                              style="outline:none;" target="_self"/>

                        <area id="down" ng-click="executeCommand()" alt="down" title="down"

                              href="javascript:console.log('down button pressed')" shape="rect"

                              coords="95,215,108,200"

                              style="outline:none;" target="_self"/>

                    </map>

            </div>

...

Any ideas?

LG Marie

[Nookz]

Hallo,

den ganzen "ng-..."-prefixen nach zu urteilen, benutzt du AngularJS, oder?

Dann könntest du einfach beim Funktionsaufruf das $event Objekt mitgeben,

welches du dann in der Funktion im Controller auswerten kannst.

In etwa so:

index.html

...

<area id="left" ng-click="executeCommand([COLOR="#800000"]$event[/COLOR])" alt="left" title="left" 

         href="javascript:console.log('left button pressed')" ng-model="command"

         shape="rect"

         coords="95,189,80,204"/>

...

App.js

...

$scope.executeCommand = function([COLOR="#800000"]clickEvent[/COLOR]) {

    [COLOR="#800000"]console.log(clickEvent.target.id);[/COLOR]

};

...

In dem $event Objekt ist natürlich noch mehr zu finden, aber wenn es dir nur um die ID geht, sollte das reichen.

Hoffe das hilft weiter.