Question

我创建了一个map指令，该指令包装了Google Maps API并创建了一个带有标记的地图，并给出了一定的坐标：

<map latitude="-17.366449199999998" longitude="-66.1564083"></map>

我正在使用angularjs-geolocation获取承诺坐标：

geolocation.getLocation().then(function(data) {
  $scope.coords = _.pick(data.coords, 'latitude', 'longitude');
});

如何将值从$scope.coords传递到地图的隔离范围？

<map latitude="{{ coords.latitude }}" longitude="{{ coords.longitude }}"></map>

我尝试将指令的范围设置为：

scope: {
  coords: '&'
}

并通过以下符号：

<map coords="coords"></map>

我认为coords与异步异步获取的事实会产生问题，因为在创建map指令期间它不可用。

我会发布我的指令代码：

angular.module('angularGeolocationApp').directive('map', function($log) {
  return {
    template: '<div class="google-map"></div>',
    restrict: 'E',
    replace: true,
    scope: {
      latitude: '@',
      longitude: '@'
    },
    link: function postLink(scope, element, attrs) {

      element.unwrap();

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

      var map = new google.maps.Map(element.get(0), {
        zoom: 15,
        center: latlng,the
        mapTypeControl: false,
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'You are here!'
      });
    }
  };
});

Answer 1

为了传递像coords这样的javascript对象，您需要在隔离范围内使用=：

scope: {
  coords: '='
}

=会将整个对象绑定到指令中，其中@只会将展平的属性值绑定到指令中。因此，=将通过引用传递。然后，您将可以访问指令中coords对象的所有属性。

然后，当您使用coords时，它看起来像这样：

var latlng = new google.maps.LatLng(scope.coords.latitude, scope.coords.longitude);

Answer 2

'＆安培;'用于父上下文评估属性。使用'='代替隔离范围与其父级之间的双向绑定属性。

scope : {
 coords : "="
}

应该这样做。

Answer 3

scope: {
  coords: '='
}

<map coords="coords"></map>

并在您的链接功能中

scope.$watch('coords', function ( coords ) {
    console.log(coords);
})

将模型传递给指令

3 个答案: