Google Map标记位置不是Angular指令

Question

我在AngularJS（MVC 5）应用程序中使用Google Map。我用的是

`googlemap` directive in my `app.js`. 

app.js

myApp.directive('googlemap', function ($compile) {
return {
    controller: function ($scope) {
        var map;

        this.registerMap = function (myMap) {
            var center = myMap.getCenter(),
              latitude = center.lat(),
              longitude = center.lng();
            //zoom = center.zoom();

            map = myMap;
            $scope.latitude = latitude;
            $scope.longitude = longitude;
            $scope.zoom = map.getZoom();
        };

        $scope.$watch('latitude + longitude', function (newValue, oldValue) {
            if (newValue !== oldValue) {
                var center = map.getCenter(),
                  latitude = center.lat(),
                  longitude = center.lng();
                if ($scope.latitude !== latitude || $scope.longitude !== longitude)
                    map.setCenter(new google.maps.LatLng($scope.latitude, $scope.longitude));
            }
        });
    },
    link: function (scope, elem, attrs, ctrl) {

        var mapOptions,
          latitude = parseFloat(attrs.latitude , 10),
          longitude = parseFloat(attrs.longitude , 10),

          //controlTemplate,
          //controlElem,
          map;

        // parsing latLong or setting default location
        latitude = latitude && parseFloat(latitude, 10) || 43.074688;
        longitude = longitude && parseFloat(longitude, 10) || -89.384294;

        mapOptions = {
            zoom: 8,
            disableDefaultUI: true,
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: true,
            streetViewControl: true,
            overviewMapControl: true,
            center: new google.maps.LatLng(latitude, longitude),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(elem[0], mapOptions);

        var var_location = new google.maps.LatLng(latitude, longitude);

        var var_marker = new google.maps.Marker({
            position: var_location,
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            title: "Venice"
        });

        function toggleBounce() {

            if (var_marker.getAnimation() != null) {
                var_marker.setAnimation(null);
            } else {
                var_marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

        google.maps.event.addListener(var_marker, 'click', toggleBounce);

        google.maps.event.addListener(var_marker, 'dragend', function (evt) {
            //document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
            latitude = evt.latLng.lat();
            console.log(' latitude = evt.latLng.lat(); ' + latitude)

            scope.latitude = evt.latLng.lat();
            scope.longitude = evt.latLng.lng();
            if (!scope.$$phase) scope.$apply();

        });

        ctrl.registerMap(map);

        function centerChangedCallback(scope, map) {
            return function () {
                var center = map.getCenter();
                scope.latitude = center.lat();
                scope.longitude = center.lng();
                scope.zoom = map.getZoom();
                if (!scope.$$phase) scope.$apply();
            };
        }
        google.maps.event.addListener(map, 'center_changed', centerChangedCallback(scope, map));
    }
};});

我想在db。中设置谷歌地图中的纬度和经度值。

<div class="col-sm-10" style="height:400px;" googlemap latitude="latitude" longitude="longitude"></div>

它可以正常工作，因为地图纬度和经度可以正常工作。

我认为div属性值来自这个位置

 link: function (scope, elem, attrs, ctrl) {

但attrs.latitude, attrs.lnglongitude始终显示undefined。

我无法如何设置attrs变量中的值。