谷歌地图和控制器之间的角度指令范围 [英] Angular directive scope between google maps and a controller
本文介绍了谷歌地图和控制器之间的角度指令范围的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下code发现用户当前地理位置iPhone负载和加载谷歌地图使用相应的指令。
不幸的是，从该指令geolocationData数据变量不被共享到HTML页脚{{geolocationData}} ...
所以，我怎么能在这种情况下，通过geolocationData对面的指令到HTML页面和/或控制器。
感谢您。
指令：
使用严格的;angular.module（'MyApp.directives'，['ngCordova']）.directive（地图，函数（$ cordovaGeolocation）{
返回{
限制：'E'，
范围： {
的onCreate：'和;'
}，
链接：功能（$范围，$元，$ ATTR）{
函数初始化（）{
如果（！$ scope.geolocationData）{
$ scope.geolocationData = {};
} $ cordovaGeolocation
.getCurrentPosition（）
。然后（功能（位置）{
VAR纬度= position.coords.latitude
$ scope.geolocationData.latitude =纬度;
VAR长= position.coords.longitude
$ scope.geolocationData.longitude =长; 的console.log（POSITION：纬度，经度）; //作品 VAR的MapOptions = {
中心：新google.maps.LatLng（纬度，经度）
//中心：$ scope.geolocationCenter，
变焦：16，
mapTypeId设为：google.maps.MapTypeId.ROADMAP
};
变种地图=新google.maps.Map（$元素[0]，的MapOptions）; $ scope.onCreate（{图：图}）; //从拖动鼠标按下时/ tapdown在地图上停止边栏
google.maps.event.addDomListener（$元素[0]，鼠标按下'功能（E）{
亦即preventDefault（）;
返回false;
}）; }，功能（错误）{
//错误
}）;
}
google.maps.event.addDomListener（窗口'负荷'，初始化）;
}
};
}）;
和以下的控制器：
使用严格的;angular.module（'MyApp.controllers'，['ngCordova']）.controller（'MapCtrl'，函数（$范围，$ ionicLoading，$ cordovaGeolocation）{ 如果（！$ scope.geolocationData）{
$ scope.geolocationData = {};
}
};
和下面的HTML片段：
＆LT;机身NG-应用=MyApp的NG控制器=MapCtrl＆GT; ＆LT;！ - 地图区域 - ＆GT;
＆LT;离子含量滚动=false的风格=底：50％;＆GT;
＆LT;地图上创建=mapCreated（图）＆GT;＆LT; /图＆GT;
＆LT; /离子含量＆GT; ＆LT;离子躯杆类=扎稳＆GT;
{{geolocationData}}
＆LT; /离子页脚酒吧＆GT;
＆LT; /身体GT;
解决方案
这
在您使用指令端：
$ scope.onCreate（{地图：地图，geolocationData：geolocationData}）;
然后你通过它在你的HTML和控制器检索：）
脚本吼叫......
HTML
...
＆LT;离子含量滚动=false的风格=底：50％;＆GT;
＆LT;地图上创建=mapCreated（地图，geolocationData）＆GT;＆LT; /图＆GT;
＆LT; /离子含量＆GT;
...
指令：
...
$ cordovaGeolocation
.getCurrentPosition（）
。然后（功能（位置）{
VAR纬度= position.coords.latitude
变种geolocationData = {};
geolocationData.latitude =纬度;
VAR长= position.coords.longitude
geolocationData.longitude =长; 的console.log（POSITION：纬度，经度）; VAR的MapOptions = {
中心：新google.maps.LatLng（纬度，经度）
//中心：$ scope.geolocationCenter，
变焦：16，
mapTypeId设为：google.maps.MapTypeId.ROADMAP
}; 变种地图=新google.maps.Map（$元素[0]，的MapOptions）; $ scope.onCreate（{地图：地图，geolocationData：geolocationData}）;
...
控制器：
$ scope.mapCreated =功能（地图，geolocationData）{
$ scope.map =图;
$ scope.geolocationData = geolocationData;
};
The following code finds the current users iPhone geolocation on load and loads a google map accordingly using a directive.
Unfortunately the geolocationData data variable from the directive does not get shared to the html footer {{geolocationData}}...
So how can I pass in this case the geolocationData across from the directive to the html page and/or the controller.
Thank you.
Directive:
'use strict';
angular.module('MyApp.directives', ['ngCordova'])
.directive('map', function($cordovaGeolocation) {
return {
restrict: 'E',
scope: {
onCreate: '&'
},
link: function ($scope, $element, $attr) {
function initialize() {
if ( !$scope.geolocationData ) {
$scope.geolocationData = {};
}
$cordovaGeolocation
.getCurrentPosition()
.then(function (position) {
var lat = position.coords.latitude
$scope.geolocationData.latitude = lat;
var long = position.coords.longitude
$scope.geolocationData.longitude = long;
console.log("POSITION: ", lat, long); //works
var mapOptions = {
center: new google.maps.LatLng(lat, long),
// center: $scope.geolocationCenter,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($element[0], mapOptions);
$scope.onCreate({map: map});
// Stop the side bar from dragging when mousedown/tapdown on the map
google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
e.preventDefault();
return false;
});
}, function(err) {
// error
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
};
});
And the following controller:
'use strict';
angular.module('MyApp.controllers', ['ngCordova'])
.controller('MapCtrl', function($scope, $ionicLoading, $cordovaGeolocation) {
if ( !$scope.geolocationData ) {
$scope.geolocationData = {};
}
};
And the following html snippet:
<body ng-app="MyApp" ng-controller="MapCtrl">
<!-- MAP AREA -->
<ion-content scroll="false" style="bottom:50%;">
<map on-create="mapCreated(map)"></map>
</ion-content>
<ion-footer-bar class="bar-stable">
{{geolocationData}}
</ion-footer-bar>
</body>
解决方案
Here it is.
On the directive side you use:
$scope.onCreate({map: map, geolocationData: geolocationData});
And then you pass it in your HTML and retrieve it in your controller :)
Scripts bellow...
HTML:
...
<ion-content scroll="false" style="bottom:50%;">
<map on-create="mapCreated(map, geolocationData)"></map>
</ion-content>
...
DIRECTIVE:
...
$cordovaGeolocation
.getCurrentPosition()
.then(function (position) {
var lat = position.coords.latitude
var geolocationData = {};
geolocationData.latitude = lat;
var long = position.coords.longitude
geolocationData.longitude = long;
console.log("POSITION: ", lat, long);
var mapOptions = {
center: new google.maps.LatLng(lat, long),
// center: $scope.geolocationCenter,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($element[0], mapOptions);
$scope.onCreate({map: map, geolocationData: geolocationData});
...
CONTROLLER:
$scope.mapCreated = function(map, geolocationData) {
$scope.map = map;
$scope.geolocationData = geolocationData;
};
这篇关于谷歌地图和控制器之间的角度指令范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
