从指令调用方法

Question

所以我正在尝试习惯 Angular，并且在尝试调用指令（谷歌地图https://github.com/davidepedone/angular-google-places-map）和执行反向地理编码时遇到了一些麻烦。我认为这将是一个更一般的指令问题。

我试图在指令中调用一个函数来更新谷歌地图的地点信息以及地图。我脑海中的想法是，我需要通过控制器传递一个变量，将该变量的范围限定为指令，然后指令将运行该函数？

更新：

 <div class="row">
 <places-map selectedid="selectid(place.id)"></places-map>
 </div>
 <button ng-click="selectid(place.id)">{{place.id}}</button> </div> 

通过这个点击我想去控制器，

$scope.selectid= function (pickplaceid){
   $scope.selectedid(pickplaceid);
}

那么 selectplaceid 应该在指令的范围变量中。

        scope: {
            customCallback: '&?',
            picked: '=?',
            address: '=?',
            fallback: '=?',
            mapType: '@?',
            readonly: '@?',
            responsive: '@?',
            draggable: '@?',
            toggleMapDraggable: '=?',
            placeNotFound: '=?',
            updateMarkerLabel: '=?',
            selectedid:'='
        },

并且可以这样调用我的方法：

 link: function ($scope, element, attrs, controller) {
 //everything else from angular-google-places

            $scope.selectedid= function (selectedplace)
            {
 ///Whatever I want to do to geocode with the placeid
            }

我认为我可能完全错误地这样做了，因为指令调用根本没有运气。我正在尝试根据我单击的位置更新我的地图，并从 placeId 中提取该特定地点的信息。任何帮助都会很棒。

Answer 1

我的工作几乎相同，我使用接收 placeId 的服务解决了它（在我的代码中，它称为 addressId，但它是 Google Maps 期望的 placeId）。在我的服务中，我使用 placeId 来检索地址详细信息：

  app.service('AddressDetailsService', ['$q', function ($q) {

    this.placeService = new google.maps.places.PlacesService(document.getElementById('map'));

    this.getDetails = function (addressId, address) {
      var deferred = $q.defer();

      var request = {
        placeId: addressId
      };

      this.placeService.getDetails(request, function (place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          address.placeId = addressId;
          address.street = getAddressComponent(place, 'route', 'long');
          address.countryCode = getAddressComponent(place, 'country', 'short');
          address.countryName = getAddressComponent(place, 'country', 'long');
          address.cityCode = getAddressComponent(place, 'locality', 'short');
          address.cityName = getAddressComponent(place, 'locality', 'long');
          address.postalCode = getAddressComponent(place, 'postal_code', 'short');
          address.streetNumber = getAddressComponent(place, 'street_number', 'short');
          address.latitude = place.geometry.location.lat();
          address.longitude = place.geometry.location.lng();

          if (address.streetNumber) {
            address.streetNumber = parseInt(address.streetNumber);
          }
          deferred.resolve(address);
        }
      });

      return deferred.promise;
    };

    function getAddressComponent(address, component, type) {
      var country = null;
      angular.forEach(address.address_components, function (addressComponent) {
        if (addressComponent.types[0] === component) {
          country = (type === 'short') ? addressComponent.short_name : addressComponent.long_name;
        }
      });

      return country;
    }
  }]);

然后你注入它并从你的指令中调用服务。这是我使用的那个，你可能需要适应它，但你明白这个想法。我没有使用链接函数，而是使用了指令控制器：

  .directive('mdAddressDetails', function mdAddressDetails() {
    var directive = {
      restrict: 'EA',
      scope: {
        address: '='
      },
      bindToController: true,
      templateUrl: 'modules/address/addressDetails.html',
      controller: AddressDetailsController,
      controllerAs: 'dir'
    };

    AddressDetailsController.$inject = ['AddressDetailsService', '$q'];

    function AddressDetailsController(AddressDetailsService, $q) {
      var dir = this;

      dir.selectAddress = selectAddress;

      function selectAddress(address) {
        if ((address) && (address.place_id)) {
          AddressDetailsService.getDetails(address.place_id, dir.address).then(
            function (addressDetails) {
              dir.address = addressDetails;
            }
          );
        }
      }
    }

    return directive;
  });

然后你只需使用想要的参数调用指令：

  <md-address-details address="myAddress"></md-address-details>