Calling javascript function within angular controller?

Question

I have a Angular controller showing a Google Map (via NgMap). On the map i can add markers by clicking on the map. When clicking, a marker is set at the position and a infoWindows is opened. The window contains a link to a javascript function.

My problem is, that i can only get this to work, as long as my function (goto) is outside of my angular controller. But i need to reference some angular methods and properties within my goto function (like $scope etc.). What am i missing?

My code:

(function () {
    'use strict';

    myApp.controller('myController', function myController($scope, $http, $window, NgMap) {
            var vm = this;

        NgMap.getMap({ id: 'myMap' }).then(function (map) {
            var layer = new google.maps.FusionTablesLayer({
                query: {
                    select: 'geometry',
                    from: 'myid'
                }
                map: map,
                suppressInfoWindows: true
            });

            layer.addListener('click', function (e) {
                var marker = new google.maps.Marker({ position: e.latLng, map: map });
                map.panTo(e.latLng);

                windowControl(e, infoWindow, map, marker);
            });     
        });

        function windowControl(e, infoWindow, map, marker) {
            geocoder.geocode({ 'latLng': e.latLng },
                function (results, status) {
                    var location;
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            location = results[0].formatted_address;
                            var windowcontent = location + "<br/><br/>";
                            windowcontent += "<button data-latlng='" + e.latLng + "' data-location='" + location + "' onclick='goto(this);'>GO</button>";

                            infoWindow.setOptions({
                                content: windowcontent
                            });
                            infoWindow.open(map, marker);
                        } else {
                            location = "No results";
                        }
                    } else {
                        location = status;
                    }
                });
        }

    });
})();

function goto(thisObj) {
    var latLng = thisObj.getAttribute( "data-latlng" );
    var location = thisObj.getAttribute( "data-location" );
    console.log(latLng + ' - ' + location);
}

This does not work: jsfiddle.net/asctujo8/1. This does work: jsfiddle.net/asctujo8/2 — brother
– brother, Commented Mar 8, 2016 at 12:53

a better oliver · Accepted Answer · 2016-03-08 14:08:11Z

2

onclick="goto()" expects a global(!) function. If you define it within the controller it's not global. You can declare a global variable first and then assign a function expression to it:

//Data
var cities = [
...
];

var goto; //<-- make goto global!

//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
  ...
  goto = function() {  //<- assign the function created within the controller
    alert('goto called');
  }

answered Mar 8, 2016 at 14:08

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Theo Itzaris · Accepted Answer · 2016-03-08 13:23:56Z

0

You can get $scope variables from within plain javascript and change their values as well.

 //get the $scope by adding a 'class' selector, that exists into your controller template. 
var myScope = angular.element($(".anyclass-Selector")).scope();

//change $scope value and call $apply to update the value to the controller
  myScope.$apply(function () {
        myScope.vm  = 'test'; //assign $scope.vm new value
  });

Update

you can change the route and add parameters , like :

$state.go('floorplan', {
             'activeEventId': result.data.newEvent,
             'activeHallId': result.data.hall1,
             'activeHallVariant': 0
  });

or javascript way

function ChangeUrl(page, url) {
            if (typeof (history.pushState) != "undefined") {
                var obj = {Page: page, Url: url};
                history.pushState(obj, obj.Page, obj.Url);
            } else {
                window.location.href = "homePage";
                // alert("Browser does not support HTML5.");
            }
        }

      ChangeUrl('Page1', 'homePage');

edited Mar 8, 2016 at 13:23

answered Mar 8, 2016 at 13:15

Theo Itzaris

4,7067 gold badges44 silver badges77 bronze badges

2 Comments

brother Over a year ago

Hmm, yeah okay. What i actually want to do, in the function, is use ui-router, to route to a new route, set a couple of angular variables and some parameters in the state?

brother Over a year ago

Thank you for the update. But i am unsure as to why the code in my initial post, does not work? Would make it easier, if i could just call the required code directly from my javascript call within the Infowindow?

Collectives™ on Stack Overflow

Calling javascript function within angular controller?

2 Answers 2

Comments

Update

or javascript way

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Update

or javascript way

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related