How to pass an object from a nested directive with an isolated scope to the scope of the parent controller in angular

Question

I have a directory tree that contains a nested directive (which is the branches) of each displayed item.

Within both directives, I have declared two parameters that should talk to the parent controller.

filter: '&' // binds the filter of the method inside the nested directive (branch) to the doSomething () method in the attribute of the tree directive, which is attached to the html directive, which is attached to the controller.

iobj: '=' is a two-way binding parameter that should pass an object with a scope to the controller. (but not currently)

Directive

 app.directive('tree', function () { return { restrict: 'E', replace: true, scope: { t: '=src', filter: '&', iobj: '=' }, controller: 'treeController', template: '<ul><branch ng-repeat="c in t.children" iobj="object" src="c" filter="doSomething()"></branch></ul>' }; }); app.directive('branch', function($compile) { return { restrict: 'E', replace: true, scope: { b: '=src', filter: '&', iobj: '=' }, template: '<li><input type="checkbox" ng-click="innerCall()" ng-hide="visible" /><a>{{ b.name }}</a></li>', link: function (scope, element, attrs) { var has_children = angular.isArray(scope.b.children); scope.visible = has_children; if (has_children) { element.append('<tree src="b"></tree>'); $compile(element.contents())(scope); } element.on('click', function(event) { event.stopPropagation(); if (has_children) { element.toggleClass('collapsed'); } }); scope.innerCall = function () { scope.iobj = scope.b; console.log(scope.iobj); scope.filter(); } } }; }); 

HTML:

 <div ng-controller="treeController"> <tree src="myList" iobj="object" filter="doSomething()"></tree> <a ng-click="clicked()"> link</a> </div> 

Controller:

 app.controller("treeController", ['$scope', function($scope) { var vm = this; $scope.object = {}; $scope.doSomething = function () { var item = $scope.object; //alert('call from directive'); console.log(item); } $scope.clicked = function () { alert('clicked'); } ... 

Currently, I can call the $scope.doSomething function from the directive on the controller. Therefore, I know that I have access to the controller area from the directive. I cannot figure out how to pass an object as a parameter from a directive back to the controller. When I run this code, $scope.object always an empty object.

I would appreciate any help or suggestions on how to do this.

Answer 1

Directive binding & supports parameter passing. Given your example

 scope.filter({message: 'Hello', anotherMessage: 'Good'}) 

message and anotherMessage become local variables in the expression associated with the directive:

 <tree src="myList" iobj="object" filter="doSomething(anotherMessage, message)"></tree> 

Here is an example plunker where callback parameters are set inside a template.

The documentation clearly states that:

It is often desirable to transfer data from an isolated volume through an expression to the parent region, this can be done by passing the map local variable names and values ​​to the shell of the fn expression. For example, if the expression is increment(amount) , then we can specify the value of the sum by calling localFn as localFn({amount: 22}) .