Angularjs 将方法从父指令传递到子指令

我想从控制器->父指令->子指令传递方法。我通过传递参数从子控制器调用此方法。它在父指令中工作，但我无法从子指令传递参数。代码如下：

从父指令，我在控制台中得到以下响应： “Ctrl方法123”

来自子指令： Ctrl方法未定义

谢谢你的帮助

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <container data-method="foo(value)"/>
    </div>
</div>

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

myApp.directive('container', function () {
    return {
        restrict: 'E',
        replace: 'true',
        scope: {
            methodToCall: '&method'
        },
        template: "<div>" +
            "<button ng-click='finish()'>Parent directive</button><child data-method=\"methodToCall(val) \"></child>" +
            "</div>",
        link: function (scope, element, attrs) {
            scope.paragraphs = [];
            scope.pushText = function () {
                scope.paragraphs.push(scope.textToPush);
                scope.textToPush = "";
            }
            scope.finish = function () {
                scope.methodToCall({value: '123'});                                
            }
        }
    }
});

myApp.directive('child', function () {
    return {
        restrict: 'E',
        scope : {
            methodToCall : '&method'
        },
        template : '<button ng-click = "newMethod()">Child directive </button>',
        controller : function($scope) {
        $scope.newMethod = function () {
          console.log('Test child '+$scope);
            //debugger;
        $scope.methodToCall({val : 'Testchild'});
    }
     }
    }
});

myApp.controller('MyController', function ($scope, $window) {

    $scope.foo = function (textArray) {
        console.log('Ctrl method '+textArray)
    };
});

var myApp=angular.module（'myApp'，[]）；
myApp.directive（'container'，function（）{
返回{
限制：'E'，
替换为：“true”，
范围：{
methodToCall:“&方法”
},
模板：“”+
“父指令”+
"",
链接：函数（范围、元素、属性）{
范围.段落=[]；
scope.pushText=函数（）{
scope.parations.push（scope.textToPush）；
scope.textToPush=“”；
}
scope.finish=函数（）{
methodToCall（{value:'123'}）；
}
}
}
});
myApp.directive（'child'，function（）{
返回{
限制：'E'，
范围：{
methodToCall:“&方法”
},
模板：“子指令”，
控制器：功能（$scope）{
$scope.newMethod=函数（）{
log（'testchild'+$scope）；
//调试器；
$scope.methodToCall（{val:'Testchild'}）；
}
}
}
});
myApp.controller（'MyController'，函数（$scope，$window）{
$scope.foo=函数（textArray）{
console.log（'Ctrl方法'+textArray）
};
});

在您的

容器中

模板中，您正确地调用了作用域上的

methodToCall（val）

函数，但您只是将局部变量

val

传递给它（您同样正确地从

子指令中获取）。但是，您需要传递一个散列，就像您在
子指令中所做的那样

因此，将包含
的
容器
模板部分更改为：

<child data-method="methodToCall({value: val})"></child>

您的分叉
您有两个问题：

您在发送
val
而不是
value
的child指令中有一个输入错误。另一个问题是您在child指令上创建了一个隔离作用域。这打破了范围继承链。相反，您需要在子指令上不使用作用域定义，或者使用
scope:true

jsfiddle-

关于
scope:{}
与
scope:true
-
的讨论老实说，这似乎是完成您正在做的事情的错误方式。虽然定义隔离作用域很好，但在本例中，它似乎不是正确的实现。如果希望通过作用域层次结构遍历多个作用域，我建议在此基础上使用Angular事件总线。然后您可以
$emit
控制器可以通过
作用域注册的数据。
API上的$谢谢你解决了这个问题。在类似的行中，如果我们递归地调用类child中的parent指令。我们需要遵循同样的程序吗@Gurukashyap，我不完全确定你所说的递归是什么意思-你的意思是你可以拥有内部
child
指令的深度N吗但是，是的，您可以使用类似的方法，除非它是真正递归的，您可能需要
“methodToCall（{val:val}）”
，这样就不会将局部变量从
val
重新定义为
value
。但是如果你所做的只是冒充一些数据，还有其他的考虑方法。
scope: {
   methodToCall: '&method'
},
template: '<child data-method="innerMethodToCall(val)"></child>',
link: function(scope){
   scope.innerMethodToCall = function(val){
      scope.methodToCall({value: val});
   }
}