javascript - 更新回调指令？

Question

我有一个谷歌地图指令，可以显示从一个位置到另一个位置的旅行。

在应用程序运行期间，我请求用户许可并将当前位置添加到范围中:

if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(function(position) {
        $rootScope.myLocation = {}
        $rootScope.myLocation.lat = position.coords.latitude;
        $rootScope.myLocation.long = position.coords.longitude;
        $rootScope.$apply()
    });
}

在某些 View 上，我根据当前位置生成带有指令的谷歌地图:

<g-map id="transit" origin="{{myLocation.lat}},{{myLocation.long}}" destination="{{location.lat}},{{location.long}}" type='TRANSIT' class="map"></g-map>

问题是，如果在用户批准位置请求之前生成 map ，谷歌地图会返回错误(因为没有起始位置)。我想要做的是将默认位置作为我的原点，并在浏览器位置 API 的回调中更新谷歌地图。

我可以使用类似指令方法的东西吗？这是我的指令:

directive('gMap', function(){
return{
    restrict: 'E',
    replace: true,
    scope: {
        origin: '@origin',
        destination: '@destination',
    },
    template: "<div id='map'></div>", 
    link: function(scope, element, attrs){
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();

        var map = new google.maps.Map(document.getElementById(attrs.id), {
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('panel'));
        var request = {
            origin: attrs.origin, 
            destination: attrs.destination,
            travelMode: google.maps.DirectionsTravelMode[attrs.type]
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }else(
                console.log(status)
            )
        });
    }
};

}

Answer 1

嗯，首先不要使用这样的东西:origin="{{myLocation.lat}},{{myLocation.long}}"。有点奇怪。这是因为您永远不知道如何以及何时计算和更新您的属性。您可以为此设置不同的错误值。您还需要正确跟踪此类属性。

更好的方法是在范围属性上使用双向绑定(bind)并将数据作为对象传递到那里:

<g-map id="transit" origin="myLocation" destination="location" type='TRANSIT' class="map"></g-map>

在这种情况下，您将把指令声明为

...
scope: {
    origin: '=',
    destination: '=',
}
...

并且您可以指定默认位置。然后您可以轻松地监视源并更新结果。