CODEWITHSUNDEEP
angularjsangularjs-directive
Kalava
Kalava

Reputation: 241

Passing method from parent to child directive

I want to pass method from controller - > parent directive - > child directive. I am calling this method from child controller by passing arguments. Its working in parent directive but I am not able to pass parameters from child directive. Below is the code :

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

From parent directive i get following response in console : 'Ctrl method 123'

From child directive : Ctrl method undefined.

Any help appreciated.

<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)
    };
});

Upvotes: 3

Views: 6613

Answers (2)

jusopi
jusopi

Reputation: 6813

You have 2 issues:

You had a typo in the child directive where you were sending val instead of value. The other issue is that you had created an isolate scope on the child directive. This was breaking the scope inheritance chain. Instead you need to either use no scope definition on the child directive or use scope: true.

jsfiddle - http://jsfiddle.net/2tw5mxf6/1/

discussion on scope: {} vs. scope:true - https://groups.google.com/forum/#!topic/angular/7Rnd5RjdlCc

Upvotes: 0

New Dev
New Dev

Reputation: 49590

In your container template you are correctly invoking methodToCall(val) function on the scope, but you are only passing the local variable val to it (which you correctly, again, obtain from the child directive). You need, however, to pass a hash, like you did from the child directive.

So, change the part of the container template that includes <child> to:

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

Perhaps, it would be more readable if you called an inner function and from there invoked the "&"-bound function:

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

Your forked jsfiddle

Upvotes: 4

Related Questions