如何公开具有隔离范围的指令的行为？

如何公开指令中的方法？我知道我应该使用数据属性，但我真的想公开behavior, not data。父控制器可以调用的东西。

假设我的 DOM 如下所示：

<div ng-app="main">
    <div ng-controller="MyCtrl">
        <button ng-click="call()" >Call</button>
        <div id="container" my-directive> </div>
    </div>
</div>

JavaScript：

angular.module("main", []).controller("MyCtrl", function($scope) {
    $scope.call = function() {
        $scope.myfn();
    };
}).directive("myDirective", function() {
    return {
        // scope: {},
        controller: function($scope) {
            $scope.myfn = function() {
                console.log("myfn called");
            }
        }
    };
});

js小提琴：http://jsfiddle.net/5gDjQ/7/ http://jsfiddle.net/5gDjQ/7/

If the scope被注释掉（即该指令没有独立的范围），它工作得很好。当我按下按钮时，myfn被调用并记录到控制台。

当我取消评论时scope，它不起作用。myfn是在子作用域上定义的，父作用域不容易使用。

就我而言，我认为污染父作用域是一个坏主意，我真的很想避免它。

那么，如何将指令中的函数公开给父控制器呢？或者：如何从父控制器调用指令方法？

您可以通过在与控制器双向绑定的作用域中设置一个变量（使用“=”）来使用隔离作用域来执行此操作。然后，在您的指令中，您可以将函数分配给该变量，并且 Angular 将使用绑定在控制器中查找相应的变量。该变量将指向您的控制器可以调用的函数。

http://jsfiddle.net/GWCCr/ http://jsfiddle.net/GWCCr/

html：注意新属性：

<div ng-app="main">
    <div ng-controller="MyCtrl">
        <button ng-click="call()" >Call</button>
        <div id="container" my-directive my-fn="fnInCtrl"> </div>
    </div>
</div>

js:

angular.module("main", []).controller("MyCtrl", function($scope) {
    $scope.call = function() {
        $scope.fnInCtrl();
    };
}).directive("myDirective", function() {
    return {
        scope: {
            myFn: '='
        },
        controller: function($scope) {
            $scope.myFn = function() {
                console.log("myfn called");
            }
        }
    };
});