如何调用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&nbsp;ng-controller="MyCtrl"> &nbsp;&nbsp;&nbsp;&nbsp;<map></map> &nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;ng-click="updateMap()">call&nbsp;updateMap()</button></div>app.directive('map',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;restrict:&nbsp;'E', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;replace:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;template:&nbsp;'<div></div>', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;link:&nbsp;function($scope,&nbsp;element,&nbsp;attrs)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scope.updateMap&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('inside&nbsp;updateMap()'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}});小提琴根据@FlorianF的评论，如果指令使用一个单独的作用域，事情就会更加复杂。有一种方法可以让它工作：添加一个set-fn属性的map指令，它将向控制器注册指令函数：<map&nbsp;set-fn="setDirectiveFn(theDirFn)"></map><button&nbsp;ng-click="directiveFn()">call&nbsp;directive&nbsp;function</button>scope:&nbsp;{&nbsp;setFn:&nbsp;'&'&nbsp;},link:&nbsp;function(scope,&nbsp;element,&nbsp;attrs)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;scope.updateMap&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('inside&nbsp;updateMap()'); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;scope.setFn({theDirFn:&nbsp;scope.updateMap});}function&nbsp;MyCtrl($scope)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$scope.setDirectiveFn&nbsp;=&nbsp;function(directiveFn)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scope.directiveFn&nbsp;=&nbsp;directiveFn; &nbsp;&nbsp;&nbsp;&nbsp;};}小提琴