javascript - 外部 Controller 指令中 Controller 的调用函数

Question

我正在创建一个 ionic 应用程序，可用于 map 上的研究和路线。您输入所需的位置，它已经为您提供了从当前位置到所需位置的路线。它工作得很好。唯一的问题是我需要调用 map Controller 内的函数，并且需要在 Controller 外部的指令工作之后运行该函数。简而言之，我需要在指令中调用 Controller 的函数。我在互联网上和 SO 中看到了一些例子，但这些例子我都无法成功，我希望你能帮助我。

示例:

.controller("atigmaps", function($ scope, $ state, $ ionicModal, $ rootScope) {
    $ Scope.load_map = function() {
        /// ...    
    }
})

.directive('example', function($ ionicModal, LocationService) {
             $ Scope.choosePlace = function(place) {
                 LocationService.getDetails(place.place_id).then(function(location) {
                     $ Scope.location = location;
                     $ Scope.close();
                     $ Scope.load_map() < -- - This

                 function is within the controller
             });
         };
     }

我的功能

var geocoder;
var map;
var marker;



geocoder = new google.maps.Geocoder();

    marker = new google.maps.Marker({
        map: $scope.model.myMap,
        draggable: true,
        icon:'pin_route.png',
    });





function carregarNoMapa(endereco) {

        geocoder.geocode({ 'address': endereco + ', Brasil', 'region': 'BR' }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();

                    $('#txtEndereco').val(results[0].formatted_address);
                    $('#txtLatitude').val(latitude);
                    $('#txtLongitude').val(longitude);
                    $('#dest').val(document.getElementById('txtEndereco').value);





                    $scope.atualizalocation();

                    var location = new google.maps.LatLng(latitude, longitude);
                    marker.setPosition(location);
                    $scope.calcRoute();
                    $scope.model.myMap.setCenter(location);
                    $scope.model.myMap.setZoom(15);

                }
            }
        });
    }

我的指令

.directive('locationSuggestion', function($ionicModal, LocationService){
  return {
    restrict: 'A',
    scope: {
      location: '='
    },
    link: function($scope, element){
      console.log('locationSuggestion started!');
      $scope.search = {};
      $scope.search.suggestions = [];
      $scope.search.query = "";
      $ionicModal.fromTemplateUrl('location.html', {
        scope: $scope,
        focusFirstInput: true
      }).then(function(modal) {
        $scope.modal = modal;
      });
      element[0].addEventListener('focus', function(event) {
        $scope.open();
      });
      $scope.$watch('search.query', function(newValue) {
        if (newValue) {
          LocationService.searchAddress(newValue).then(function(result) {
            $scope.search.error = null;
            $scope.search.suggestions = result;
          }, function(status){
            $scope.search.error = "There was an error :( " + status;
          });
        };
        $scope.open = function() {
          $scope.modal.show();
        };
        $scope.close = function() {
          $scope.modal.hide();
        };






        $scope.choosePlace = function(place) {
          LocationService.getDetails(place.place_id).then(function(location) {
            $scope.location = location;
            $scope.close();








          });
        };
      });
    }
  }




})

Answer 1

您应该将函数包含在工厂中，将工厂包含在 Controller 和指令中，然后调用该函数，例如:MyFactory.load_map()

示例:

工厂.js

angular.module('starter.factoryServices', [])

  .factory('MyFactory', function($q) {

    return {
          load_map : function() {
               /// ...    
           }
      }


  });

您的代码:

.controller("atigmaps", function($ scope, $ state, $ ionicModal, $ rootScope, MyFactory) {

})

.directive('example', function($ ionicModal, LocationService, MyFactory) {
             $ Scope.choosePlace = function(place) {
                 LocationService.getDetails(place.place_id).then(function(location) {
                     $ Scope.location = location;
                     $ Scope.close();
                     MyFactory.load_map(); 

             });
         };
     }

在你的 Angular 模块中:

angular.module('starter', ['ionic', 'starter.factoryServices'])

还有index.html，添加引用

<script src="path/myFactory.js"></script>