AngularJS GoogleMap-Richtlinie

Question

Ich versuche eine Angular-Direktive zu erstellen, um Google Maps anzuzeigen.

Hier ist meine Richtlinie:

'use strict'; 

var CartoBundle = angular.module('CartoBundle', []); 

CartoBundle.directive('cartoBundleMap', function() { 

var map; 

return { 
    restrict: 'EA', 
    replace: true, 
    template: '<section id="map"></section>', 
    scope: { 
     zoom: "@", 
     zoomControl: "=", 
     fullScreenControl: "=", 
     mapTypeControl: "=", 
     scaleControl: "=", 
     streetViewControl: "=", 
     mapTypeId: "@" 
    }, 
    link: function(scope, element, attrs) { 

     var options = { 
      center: new google.maps.LatLng(46.52863469527167,2.43896484375), 
      zoom: 6, 
      zoomControl : true, 
      fullscreenControl : true, 
      mapTypeControl: true, 
      scaleControl: true, 
      streetViewControl: true, 
      mapTypeId: "hybrid" 
     }; 

     if (scope.zoom) options.zoom = scope.zoom * 1; 
     if (scope.zoomControl) options.zoomControl = scope.zoomControl; 
     if (scope.fullScreenControl) options.fullScreenControl = scope.fullScreenControl; 
     if (scope.mapTypeControl) options.mapTypeControl = scope.mapTypeControl; 
     if (scope.scaleControl) options.scaleControl = scope.scaleControl; 
     if (scope.streetViewControl) options.streetViewControl = scope.streetViewControl; 
     if (scope.mapTypeId) options.mapTypeId = scope.mapTypeId; 

     map = new google.maps.Map(element[0], options); 
    }, 
}; 
}); 

Wenn ich einen Test mit dem folgenden HTML machen es die Karte anzeigen lassen mit allen Kontrollen (es funktioniert):

<carto-bundle-map></carto-bundle-map> 

Außerdem, wenn ich versuche, setup text values ​​es funktioniert auch:

<carto-bundle-map 
    map-type-id="satellite" 
></carto-bundle-map> 

Aber wenn ich versuche, booleans Werte einzurichten, tut es nicht (meine con Steuerungen bleiben):

<carto-bundle-map 
    zoom-control="false" 
    full-screen-control="false" 
    map-type-control="false" 
    scale-control="false" 
    street-view-control="false" 
    map-type-id="satellite" 
></carto-bundle-map> 

Letzte, was ich sagen kann, das ist, wenn ich die Kontrollen auf false direkt in der Richtlinie zwicken es funktioniert und meine Steuerelemente verschwinden.

Ich habe irgendwo gelesen, es war, weil ich die Bereiche mit „gleich“ gesetzt hatte, aber es ist bereits der Fall:

scope: { 
    zoom: "@", 
    zoomControl: "=", 
    fullScreenControl: "=", 
    mapTypeControl: "=", 
    scaleControl: "=", 
    streetViewControl: "=", 
    mapTypeId: "@" 
}, 

jemand wie ich einen Anfänger mit AngularJS helfen kann.

Grüße

Answer 1

Ok ich fand, warum es nicht funktionierte.

Es ist, weil, wenn scope.attribute gleich false ist, es nie die If-Bedingung validieren wird.

ich den Code wie folgt geändert:

if (!angular.isUndefined(scope.zoom)) options.zoom = scope.zoom * 1; 

Hope this später jemand helfen kann.

Grüße