如何将控制器函数传递给指令中的指令

Question

我有一个控制器函数，我将它传递给一个通用指令 (#1)。在通用指令模板中，我有另一个特定指令（#2），我将相同的控制器函数传递给它。

问题似乎是通用指令 (#1) 在接收到控制器方法时对其进行了评估，因此没有将其正确传递给通用指令模板中的特定指令 (#2)。

JSFIDDLE：http://jsfiddle.net/Hgh7D/

var myApp = angular.module('myApp',[])

.controller('myctrl', ['$scope', function($scope) {
    $scope.ctrlfunc = function(myvar) {
         console.log(myvar);   
    }
}])

.directive('mydir1', function() {
    return {
        template: '<div mydir2 dirfunc="dirfunc"></div>',
        scope: {
            dirfunc: '&'
        }
    }
})

.directive('mydir2', function() {
    return {
        template: '<button ng-click="onClick()">click</button>',
        scope: {
            dirfunc: '&'
        },        
        link: function(scope) {   
            scope.onClick = function() {
                scope.dirfunc({myvar:'hello'});
            }
        }
    }
})

如果我将函数的特定指令的范围声明更改为“=”而不是“&”，则它可以正常工作。

JSFIDDLE：http://jsfiddle.net/Hgh7D/1/

.directive('mydir2', function() {
    return {
        template: '<button ng-click="onClick()">click</button>',
        scope: {
            dirfunc: '='
        },        
        link: function(scope) {   
            scope.onClick = function() {
                scope.dirfunc({myvar:'hello'});
            }
        }
    }
})

但是我不想这样做，因为它可能并不总是用于这种 2 层指令的情况。我希望它保持“&”，因为它需要一个功能。这可能吗？

Answer 1

不幸的是，使用 '&'（即在 dir1 中）将导致指令在父级范围内运行该函数，因此如果您将其传递给另一个子级，它将不再处于活动状态。一种解决方法是定义dir2 的链接函数，如下所示：

link: function(scope, element, attrs) {   
        scope.onClick = function() {
            scope.dirfunc({myvar:'hello'});
        }
        attrs.$observe("dirfunc", function (fn) {
            if ("dirfunc" in scope.$parent) {
                scope.dirfunc = scope.$parent.dirfunc;
            }
        });
    }

$observe 中的逻辑允许它在您的分层案例或未分层的情况下从其父级继承。这不是最干净的解决方案，如果它的深度超过一层，则可能不起作用，但在您的示例中确实有效。

更新小提琴：http://jsfiddle.net/LyA9w/