Javascript Angularjs在指令中获得输出后将值分配给控制器_Javascript_Angularjs_Google Maps Api 3

Javascript Angularjs在指令中获得输出后将值分配给控制器

javascript angularjs google-maps-api-3

Javascript Angularjs在指令中获得输出后将值分配给控制器,javascript,angularjs,google-maps-api-3,Javascript,Angularjs,Google Maps Api 3,我对angularjs和googlemaps很陌生，请帮帮我我的html文件： <body ng-app="myApp" ng-controller="carLocationCtrl"> <div my-map=""></div> <p>{{myCurrentPosition}}</p> <script type="text/javascript" src="E:\Projects\Angular Pr

我对angularjs和googlemaps很陌生，请帮帮我

我的html文件：

<body ng-app="myApp" ng-controller="carLocationCtrl">

    <div my-map=""></div>
    <p>{{myCurrentPosition}}</p>
    <script type="text/javascript" src="E:\Projects\Angular Projects\angularmap.js"></script>

</body>


{{myCurrentPosition}}

在这里，我想从指令中获取currentPosition的值，然后将该值传递或分配到控制器变量myCurrentLocation中。这样，只有我才能在我的

标记中显示该值

我的控制器：

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

    OEMControllers.controller('carLocationCtrl', ["$scope", "$rootScope", function ($scope, $rootScope) {
    $scope.isEditLocation = false;
    $scope.myCurrentLocation='';
    $scope.saveCarLocation = function () {
        $scope.isEditLocation = true;
    };
    $scope.editCarLocation = function () {
        $scope.isEditLocation = false;
    };
    }]).directive('myMap', function() {

    var link = function(scope, element, attrs) {
        var map, infoWindow;
        var markers = [];

        // map config
        var mapOptions = {
            center: new google.maps.LatLng(50, 2),
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

        // init the map
        function initMap() {
            if (map === void 0) {
                map = new google.maps.Map(element[0], mapOptions);
            }
        }    

        // place a marker
        function setMarker(map, position) {
            var marker;
            var markerOptions = {
                position: position,
                center:position,
                map: map,
                icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
            };

            marker = new google.maps.Marker(markerOptions);
            markers.push(marker); // add marker to array

            //pan to marker..
            console.log('marker.getPosition() :: '+marker.getPosition());
             map.panTo(marker.getPosition());
            map.setZoom(16);
             console.log('pan called');

    //here i can able to get my currentPosition but how can i send this value to my controller .........

    scope.myCurrentLocation=marker.getPosition();

    console.log('output :: '+scope.myCurrentLocation);

        }

        // show the map and place some markers
        initMap();
        getLocation();

        var watchID=null;
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(onSuccess);

                /* var options = { timeout: 30000 };
                    watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);*/

        } else { 
                console.log('Not obtain geolocation');
        }
    }

    //geolocation succes..

        function onSuccess(position) {

            console.log('lat :: '+position.coords.latitude);
            console.log('long :: '+position.coords.longitude);


                setMarker(map, new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
                }

                function onError(error)
                {
                    console.log(error.message);
                }

    };

    return {
        restrict: 'A',
        template: '<div id="gmaps"></div>',
        replace: true,
        link: link
    };
    });

var OEMControllers=angular.module（'myApp'，[]）；
OEMControllers.controller（'carLocationCtrl'，[“$scope”，“$rootScope”，函数（$scope，$rootScope）{
$scope.isEditLocation=false；
$scope.myCurrentLocation=''；
$scope.saveCarLocation=函数（）{
$scope.isEditLocation=true；
};
$scope.editCarLocation=函数（）{
$scope.isEditLocation=false；
};
}]).directive（'myMap'，function（）{
变量链接=函数（范围、元素、属性）{
var映射，信息窗口；
var标记=[]；
//地图配置
变量映射选项={
中心：新google.maps.LatLng（50,2），
缩放：4，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误
};
//初始化地图
函数initMap（）{
如果（映射===void 0）{
map=new google.maps.map（元素[0]，mapOptions）；
}
}    
//放置标记
功能设置标记（地图、位置）{
var标记；
变量标记选项={
职位:职位,，
中锋:位置,，
地图：地图，
图标：'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
};
marker=新的google.maps.marker（markerOptions）；
markers.push（marker）；//将marker添加到数组
//平移到标记。。
log（'marker.getPosition（）：'+marker.getPosition（））；
map.panTo（marker.getPosition（））；
map.setZoom（16）；
log（'pan called'）；
//在这里，我可以获得我的当前位置，但我如何将该值发送到我的控制器。。。。。。。。。
scope.myCurrentLocation=marker.getPosition（）；
log（'output:：'+scope.myCurrentLocation）；
}
//显示地图并放置一些标记
initMap（）；
getLocation（）；
var-watchID=null；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（onSuccess）；
/*var选项={timeout:30000}；
watchID=navigator.geolocation.watchPosition（onSuccess、onError、options）*/
}否则{
console.log（'不获取地理位置'）；
}
}
//地理定位成功。。
成功时的功能（位置）{
console.log（'lat:：'+位置坐标纬度）；
log（'long:：'+position.coords.longitude）；
setMarker（map，新的google.maps.LatLng（position.coords.latitude，position.coords.longitude））；
}
函数onError（错误）
{
console.log（错误消息）；
}
};
返回{
限制：“A”，
模板：“”，
替换：正确，
链接：链接
};
});

在这里，您需要向“myMap”指令添加一个独立的作用域，并将“myCurrentLocation”从控制器引用到指令，如下所示：

链接函数将返回如下所示：

return {
    restrict: 'A',
    template: '<div id="gmaps"></div>',
    replace: true,
    scope : {
        location : "="
    }
    link: link
};

您的html文件如下所示：

<body ng-app="myApp" ng-controller="carLocationCtrl">

    <div my-map="" location="myCurrentLocation"></div>
    <p>{{myCurrentLocation}}</p>
    <script type="text/javascript" src="E:\Projects\Angular Projects\angularmap.js"></script>

</body>


{{myCurrentLocation}}

将值指定给范围对象。（我认为您在代码中已经这样做了）
angular使用级联/扩展作用域，因此在子元素中声明的任何控制器仍然可以读取您分配的值。您可以通过ng模型或ng绑定直接访问它们
您可能希望实例化一个服务/值（单例），并使指令和控制器都依赖于它。现在，所有依赖于服务/值的人都可以访问您在指令中指定的值

我认为您的代码可以，但在html中使用了错误的变量名，如“myCurrentPosition”，我认为它可以与“myCurrentLocation”一起使用

<body ng-app="myApp" ng-controller="carLocationCtrl">

    <div my-map="" location="myCurrentLocation"></div>
    <p>{{myCurrentLocation}}</p>
    <script type="text/javascript" src="E:\Projects\Angular Projects\angularmap.js"></script>

</body>