如何调用AngularJS指令中定义的方法？

Question

如何调用AngularJS指令中定义的方法？我有一个指令，这是代码：.directive('map', function() {     return {         restrict: 'E',         replace: true,         template: '<div></div>',         link: function($scope, element, attrs) {             var center = new google.maps.LatLng(50.1, 14.4);              $scope.map_options = {                 zoom: 14,                 center: center,                 mapTypeId: google.maps.MapTypeId.ROADMAP            };             // create map             var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options);             var dirService= new google.maps.DirectionsService();             var dirRenderer= new google.maps.DirectionsRenderer()             var showDirections = function(dirResult, dirStatus) {                 if (dirStatus != google.maps.DirectionsStatus.OK) {                     alert('Directions failed: ' + dirStatus);                     return;                   }                   // Show directions                 dirRenderer.setMap(map);                 //$scope.dirRenderer.setPanel(Demo.dirContainer);                 dirRenderer.setDirections(dirResult);             };             // Watch             var updateMap = function(){                 dirService.route($scope.dirRequest, showDirections);              };                 $scope.$watch('dirRequest.origin', updateMap);             google.maps.event.addListener(map, 'zoom_changed', function() {                 $scope.map_options.zoom = map.getZoom();               });             dirService.route($scope.dirRequest, showDirections);           }     }})我想打电话updateMap()在用户操作上。操作按钮不在指令中。什么是最好的方式updateMap()从控制器那里？

Answer 1

假设操作按钮使用相同的控制器$scope作为指令，只需定义函数updateMap在……上面$scope在链接函数中。然后，当单击操作按钮时，控制器可以调用该函数。

<div ng-controller="MyCtrl">
    <map></map>
    <button ng-click="updateMap()">call updateMap()</button></div>

app.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {
            $scope.updateMap = function() {
                alert('inside updateMap()');
            }
        }
    }});

小提琴

---

根据@FlorianF的评论，如果指令使用一个单独的作用域，事情就会更加复杂。有一种方法可以让它工作：添加一个set-fn属性的map指令，它将向控制器注册指令函数：

<map set-fn="setDirectiveFn(theDirFn)"></map><button ng-click="directiveFn()">call directive function</button>

scope: { setFn: '&' },link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});}

function MyCtrl($scope) {
    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };}

小提琴