外部コントローラー指令内のコントローラーの呼び出し機能

Question

マップ上の研究とルートで動作するイオンアプリケーションを作成しています。目的の場所を入力すると、現在の場所から目的の場所までのルートが表示されます。それは完璧に働いています。唯一の問題は、マップコントローラ内にある関数を呼び出す必要があり、コントローラの外にあるディレクティブの作業の後にこの関数を実行する必要があることです。 簡単な言葉で、私は指令の中でコントローラの機能を呼び出す必要があります。 私はインターネット上のいくつかの例を見ましたが、ここにはありませんが、これらの例はどれも成功することができませんでした。

例：

.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 
      }); 
     }; 
    } 

My機能

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

あなたは、コントローラのAPIを公開する「&」記号を使用することができ、あなたはについて話ディレクティブはあなたのであると仮定すると（ドキュメントの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); 
    } 
    } 
})(); 

ここで私はようやく

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

を作成し、ディレクティブを呼び出すHTMLがあります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]); 
     } 
    } 

    } 
})();