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

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/