Gabrielle Gabrielle - 5 months ago 14
Javascript Question

Angular scope variables and plugins scope

I am trying to do several things, and with all of them I am facing the same problem. I want to access some angular variables inside other libs, for example:

I have a directive, that does this:

var map = new google.maps.Map(element[0], {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
center: center
});


In this case, center is a variable declared right before map, but center is not available inside the "Map"...

In the same way..

I have a directive with this:

function link(scope, element, attrs) {
$.datepicker.regional["pt-BR"];
element.datepicker({
onSelect: function(){
scope.model = $(this).datepicker('getDate');
scope.showDp = false;
}
});
}


"model" and "showDp" are variables from my scope, scope is accessible out of datepicker's function, but on the "onSelect" I don't have nothing, how can I do in both cases?

Answer

For the first case you could do something like this -

var center = 'something';
var constructWith = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
    },
    center: center
};
var map = new google.maps.Map(element[0], constructWith);

As for the second case, try something like this -

var myFunc = function () {
   // if $(this) doesn't work use $(element)
   scope.model = $(this).datepicker('getDate');
   scope.showDp = false;
};
$.datepicker.regional["pt-BR"];
element.datepicker({onSelect: myFunc});