javascript - AngularJS GoogleMap 指令

Question

我正在尝试创建一个 Angular 指令来显示 Google map 。

这是我的指令:

'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);
    },
};
});

当我使用以下 HTML 进行测试时，它会显示带有所有控件的 map (它有效):

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

此外，当我尝试设置文本值时，它也有效:

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

但是当我尝试设置 bool 值时却没有(我的控件仍然存在):

<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>

我能说的最后一件事是，如果我直接在指令中将控件调整为 false，它就会起作用，并且我的控件会消失。

我在某处读到这是因为我必须使用“等于”设置范围，但情况已经如此:

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

有人可以帮助我，因为我是 angularjs 的初学者吗？

问候

Answer 1

好吧，我找到了它不起作用的原因。

这是因为如果scope.attribute等于false，它永远不会验证if条件。

我修改了代码如下:

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

希望这可以帮助以后的人。

问候