使用范围。将被调用的函数关联到指令函数

angular.module('myApp', [])
.controller('MyCtrl',['$scope',function($scope) {

}])
.directive('mydirective',function(){
 function link(scope, el, attr){
   //use scope.$parent to associate the function called to directive function
   scope.$parent.myfunction = function directivefunction(parameter){
     //do something
}
}
return {
        link: link,
        restrict: 'E'   
      };
});

在HTML中

<div ng-controller="MyCtrl">
    <mydirective></mydirective>
    <button ng-click="myfunction(parameter)">call()</button>
</div>

老实说，我对这篇文章中的任何答案都不太信服。下面是我的解决方案:

指令处理程序(管理器)方法

该方法不知道指令的$作用域是共享作用域还是隔离作用域

一个用来注册指令实例的工厂

angular.module('myModule').factory('MyDirectiveHandler', function() {
    var instance_map = {};
    var service = {
        registerDirective: registerDirective,
        getDirective: getDirective,
        deregisterDirective: deregisterDirective
    };

    return service;

    function registerDirective(name, ctrl) {
        instance_map[name] = ctrl;
    }

    function getDirective(name) {
        return instance_map[name];
    }

    function deregisterDirective(name) {
        instance_map[name] = null;
    }
});

指令代码，我通常把所有不处理DOM的逻辑都放在指令控制器里。并在处理程序中注册控制器实例

angular.module('myModule').directive('myDirective', function(MyDirectiveHandler) {
    var directive = {
        link: link,
        controller: controller
    };

    return directive;

    function link() {
        //link fn code
    }

    function controller($scope, $attrs) {
        var name = $attrs.name;

        this.updateMap = function() {
            //some code
        };

        MyDirectiveHandler.registerDirective(name, this);

        $scope.$on('destroy', function() {
            MyDirectiveHandler.deregisterDirective(name);
        });
    }
})

模板代码

<div my-directive name="foo"></div>

使用工厂访问控制器实例并运行公开的方法

angular.module('myModule').controller('MyController', function(MyDirectiveHandler, $scope) {
    $scope.someFn = function() {
        MyDirectiveHandler.get('foo').updateMap();
    };
});

角的方法

从angular的书中学习如何处理

<form name="my_form"></form>

使用$parse并在$parent作用域上注册控制器。这种技术不适用于孤立的$scope指令。

angular.module('myModule').directive('myDirective', function($parse) {
    var directive = {
        link: link,
        controller: controller,
        scope: true
    };

    return directive;

    function link() {
        //link fn code
    }

    function controller($scope, $attrs) {
        $parse($attrs.name).assign($scope.$parent, this);

        this.updateMap = function() {
            //some code
        };
    }
})

在控制器中使用$scope.foo访问它

angular.module('myModule').controller('MyController', function($scope) {
    $scope.someFn = function() {
        $scope.foo.updateMap();
    };
});

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

<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的评论，如果指令使用孤立的作用域，事情就更复杂了。这里有一种让它工作的方法:给map指令添加一个set-fn属性，它将在控制器上注册指令函数:

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

小提琴

尽管将对象暴露在指令的孤立作用域上以方便与之通信可能很有吸引力，但这样做可能会导致令人困惑的“意大利面条”代码，特别是当你需要通过几个级别(控制器、指令、嵌套指令等)链接这种通信时。

我们最初是沿着这条路走的，但经过更多的研究后发现，它更有意义，并导致更可维护和可读的代码，以公开事件和属性，指令将通过服务进行通信，然后在指令中的服务属性上使用$watch或任何其他控件，这些控件需要对通信的这些变化做出反应。

这种抽象与AngularJS的依赖注入框架配合得非常好，因为你可以将服务注入到任何需要对这些事件做出反应的项中。如果你看一下Angular.js文件，你会发现里面的指令也以这种方式使用services和$watch，它们不会在孤立的作用域中公开事件。

最后，如果你需要在相互依赖的指令之间通信，我建议在这些指令之间共享一个控制器作为通信手段。

AngularJS的维基最佳实践也提到了这个:

Only use .$broadcast(), .$emit() and .$on() for atomic events Events that are relevant globally across the entire app (such as a user authenticating or the app closing). If you want events specific to modules, services or widgets you should consider Services, Directive Controllers, or 3rd Party Libs $scope.$watch() should replace the need for events Injecting services and calling methods directly is also useful for direct communication Directives are able to directly communicate with each other through directive-controllers

也许这不是最好的选择，但你可以使用angular.element("#element"). isolatescope()或$("#element"). isolatescope()来访问指令的作用域和/或控制器。

您可以指定一个DOM属性，该属性可用于允许指令在父作用域上定义函数。然后父作用域可以像调用其他方法一样调用此方法。这是一个活塞。下面是相关代码。

Clearfn是指令元素上的一个属性，父作用域可以将一个作用域属性传递给它，然后指令可以将该作用域属性设置为一个完成所需行为的函数。

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <style>
      my-box{
        display:block;
        border:solid 1px #aaa;
        min-width:50px;
        min-height:50px;
        padding:.5em;
        margin:1em;
        outline:0px;
        box-shadow:inset 0px 0px .4em #aaa;
      }
    </style>
  </head>
  <body ng-controller="mycontroller">
    <h1>Call method on directive</h1>
    <button ng-click="clear()">Clear</button>
    <my-box clearfn="clear" contentEditable=true></my-box>
    <script>
      var app = angular.module('myapp', []);
      app.controller('mycontroller', function($scope){
      });
      app.directive('myBox', function(){
        return {
          restrict: 'E',
          scope: {
            clearFn: '=clearfn'
          },
          template: '',
          link: function(scope, element, attrs){
            element.html('Hello World!');
            scope.clearFn = function(){
              element.html('');
            };
          }
        }
      });
    </script>
  </body>
</html>