How to stop propagation of & functions into nested directives - angularjs

Question

here I got one ctrl
controllers.ctrl = function($scope){
$scope.trData = [
{name : 'elem1',children : []},
{name : 'elem2',children :
[{name : 'elem3',children : []}]
}
};
$scope.testFunction = function(tr){
console.debug(tr);
}
}
And a nested directive
directives.nested = function($compile){
restrict: 'E',
replace: false,
scope: {
tr: '=',
test : '&'
},
link: function(scope, element, attrs) {
scope.setActive = function(){
console.debug("A");
console.debug(scope.tr);
scope.test({tr:scope.tr});
console.debug("B");
};
var template = '<span data-ng-click="setActive();">{{tr.name}} - </span>';
if(scope.tr.children.length > 0){
template += '<ul><li data-ng-repeat="tr0 in tr.children">';
template += '<nested tr="tr0" test="test(tr)"></nested>';
template += '</li></ul>';
}
var newElement = angular.element(template);
$compile(newElement)(scope);
element.replaceWith(newElement);
}
And in my template, of course :
<ul>
<li data-ng-repeat="tr in trData">
<nested tr="tr" test="testFunction(tr)"></nested>
</li>
</ul>
When I click on a elem1, I've got in the console:
A
{name : 'elem1',children : []}
B
If I click on 'elem3', I got
A
{name : 'elem3',children : []}
{name : 'elem2',children : [{name : 'elem3',children : []}] }
B
The function testFunction is called twice. I would like to have it called only once with elem3.
I am sure there is a better way to do this.
Fiddle from Banana-In-Black : http://jsfiddle.net/T4uKf/

Answer 1

Update:
Try to click on elem3 : You will see the console.debug output 'Object
{name: "elem3", children: Array[0]' And the console.warn outputs :
Object {name: "elem2", children: Array[1] I though I would had "elem3"
output twice. Instead I got "elem3" and "elem2". Do you know why this
happens?
To anwser this, first we take a look on generated HTML and scope:
<!-- controller scope -->
<li data-ng-repeat=" tr in trData "> <!--1|-child scope -->
<span>elem2 - </span> <!--2 |-isolated scope -->
<ul> <!-- | -->
<li data-ng-repeat="tr0 in tr.children"><!--3 |-child scope -->
<span>elem3</span> <!--4 |-isolated scope -->
</li>
</ul>
</li>
The variables in scope will be like: (|- stands for inheritance)
Controller Scope: { trData: [...] }
|- Scope1 (child): { tr0: elem2 }
Scope2 (isolated): { tr: elem2, test: function() }
|- Scope3 (child): { tr0: elem3 }
Scope4 (isolated): { tr: elem3, test: function() }
Now, according to official api docs, which talks about isolated scope variable:
& or &attr - provides a way to execute an expression in the context of the parent scope.
* This feature is implemented by $parse service.
After you clicked on elem3, the execution order will be: (skip the log part.)
test({ tr: scope.tr }) using Scope4 as its execution context
Equals to $parse('test(tr)')(Scope3, { tr: elem3 }).
It's called in Scope3 because $parse executes in parent scope.
test(tr) using Scope3 as its execution context
Equals to $parse('testFunction(tr)')(Scope1, elem3)
It's called in Scope1 because test() is inherited from Scope2, and $parse executes in parent scope.
testFunction(tr) using Scope1 as its execution context
Now tr will be parsed into Scope1.tr which is elem2 because elem3.tr doesn't exist.
Finally, console.warn(elem2);
This is how that happens...
* About $parse service you can check this.
Origin:
I changed console.log to console.warn, ang log shows it only executed once.
$scope.testFunction = function (tr) {
console.warn(tr);
}
http://jsfiddle.net/T4uKf/
It prints twice
A
{name : 'elem3',children : []}
{name : 'elem2',children : [{name : 'elem3',children : []}] }
B
only because you log it in both scope.setActive and $scope.testFunction()