Вызов методов из директивы

0

Поэтому я пытаюсь использовать углы и иметь некоторые проблемы, пытаясь вызвать директиву (google maps https://github.com/davidepedone/angular-google-places-map) и выполнять обратное геокодирование. Я думаю, что это были бы более общие вопросы директив.

Я пытаюсь вызвать функцию в директиве, чтобы обновить информацию о местоположении карт Google, а также карту. То, как я размышляю в своей голове, заключается в том, что мне нужно передать переменную через контроллер, обладать этой переменной директивой, а затем директива будет запускать эту функцию?

ОБНОВЛЕНО:

 <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
            }

Я думаю, что я могу просто сделать это совершенно неправильно, не имея вообще никакой удачи в директивном звонке. Я пытаюсь обновить свою карту на основе местоположения, которое я нажимаю, и вытаскивать информацию из этого конкретного места с места. Любая помощь будет большой.

  • 0
    Вы создаете изолированную область в своей директиве, поэтому она не имеет представления о переменных в контроллере. Вам необходимо передать нужные переменные в html: <place-map selectplaceid = "place.id"> </ place-map>
  • 0
    Разве это не говорит о том, что ваша сфера selectplaceid = place.id? Как бы это вызвало функцию selectplaceid?
Показать ещё 6 комментариев
Теги:
google-maps
angularjs-scope
angularjs-directive

1 ответ

0

У меня почти такая же работа, и я решил ее с помощью Службы, которая получает placeId (в моем коде он называется addressId, но это место, которое Google Maps ожидает). В моей службе я использую 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>
Поделиться
  • 0
    интересный способ поставить контроллер, а не связать его. Поскольку у меня уже есть директива <place-map> </ place-map>, я не понимаю, как ваш ng-click вызовет эту директиву?
  • 0
    Сожалею! Пропустил эту часть. Я предполагаю, что это будет что-то вроде этого: stackoverflow.com/questions/15613992/… так что у вас фактически есть ng-click внутри вашей директивы, и обработайте это там.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню