Функция вызова контроллера в директиве внешнего контроллера

Question

Я создаю ионное приложение, которое работает с исследованиями и маршрутами на карте. Вы вводите нужное местоположение, и оно уже отправляет маршрут из вашего текущего местоположения в нужное место. Он работает отлично. Единственная проблема в том, что мне нужно вызвать функцию, которая находится внутри контроллера карты, и мне нужно, чтобы эта функция запускалась после работы директивы, которая находится вне контроллера. Проще говоря, мне нужно вызвать функцию контроллера в директиве. Я видел несколько примеров в Интернете и здесь, в 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

Вы должны включить вашу функцию внутри завода, включают завод в контроллере и директивы, и вызовите функцию: MyFactory.load_map()

Пример:

factory.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.module('starter', ['ionic', 'starter.factoryServices']) 

И index.html, добавьте ссылка

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

Answer 2

Предполагая, что директива вы говорите о том, ваше, вы можете использовать символ «&», чтобы выставить апи контроллера (см here для документации, он говорит, «компонент», но он работает с директивами тоже). Вот пример директивы я использую:

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .directive('tabs', tabs); 

    /** @ngInject */ 
    function tabs() { 
    var directive = { 
     templateUrl: 'app/components/tabs/tabs.component.html', 
     controller: 'TabsController', 
     controllerAs: 'vm', 
     bindToController: { 
     id: '@', 
     onApiReady: '&' 
     }, 
     scope:{} 
    }; 

    return directive; 
    } 
})(); 

А вот связанный контроллер:

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .controller('TabsController', TabsController); 

    /** @ngInject */ 
    function TabsController(TabList) { 
    var vm = this, api; 
    vm.$onInit = activate; 

    api = { 
     addTab: addTab 
    }; 

    //////////////////////////////////////////// 

    function activate() { 
     vm.tabList = new TabList(vm.id); 

     if(vm.onApiReady){ 
     vm.onApiReady({api: api}); 
     } 
    } 

    function addTab(tab) { 
     vm.tabList.addTab(tab); 
    } 
    } 
})(); 

Вот это HTML, который называют директиве я создал

<div ng-controller="MainController as vm"> 
    <tabs id="main-tabs" on-api-ready="vm.onTabsApiReady(api)"></tabs> 
</div> 

И, наконец, MainController

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .controller('MainController', MainController); 

    /** @ngInject */ 
    function MainController(mainService) { 
    var vm; 
    vm = this; 
    vm.$onInit = activate; 
    vm.onTabsApiReady = onTabsApiReady; 

    /////////////////////////////////////// 

    function activate() {} 

    function onTabsApiReady(tabList){ 
     var i, tabs = ['tab1','tab2']; 

     for(i = 0 ; i < tabs.length ; ++i){ 
     tabList.addTab(tabs[i]); 
     } 
    } 

    } 
})();