angularjs - 将方法从父指令传递到子指令

Question

我想从 Controller 传递方法 ->父指令 ->子指令。我通过传递参数从子 Controller 调用此方法。它在父指令中工作，但我无法从子指令传递参数。下面是代码:

http://jsfiddle.net/gurukashyap/e14ff06p/6/

从父指令我在控制台中得到以下响应:'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)
    };
});

Answer 1

在你的container您正确调用的模板 methodToCall(val)在作用域上运行，但您只传递局部变量 val到它(你再次正确地从 child 指令中获得)。但是，您需要传递一个散列，就像您在 child 中所做的那样。指示。

因此，更改 container 的部分包含 <child> 的模板到:

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

也许，如果您调用一个内部函数并从那里调用 "&"，它会更具可读性-绑定(bind)函数:

scope: {
   methodToCall: '&method'
},
template: '<child data-method="innerMethodToCall(val)"></child>',
link: function(scope){
   scope.innerMethodToCall = function(val){
      scope.methodToCall({value: val});
   }
}

你的 fork jsfiddle