Como passar uma referência de função em uma diretiva recursiva em Angular?
Eu tenho esta diretiva:
app.directive('recursiveListItem', ['$http', 'RecursionHelper', function ($http, RecursionHelper) {
return {
restrict: 'E',
scope: {
parent: '=',
onNodeClick: '&',
},
compile: function (element, attributes) {
return RecursionHelper.compile(element);
},
template:
'<div class="list-group-item-heading text-muted parent "> \
<input type="checkbox" data-ng-click="visible = !visible" id="{{parent.Name}}">\
<label for="{{parent.Name}}"> </label>\
<a href="javascript:void(0)" data-ng-click="onNodeClick({node: parent})">{{parent.Name}}</a> \
</div> \
<ul data-ng-if="parent.Children.length > 0" data-ng-show="visible"> \
<li ng-repeat="child in parent.Children"> \
<recursive-list-item data-parent="child" data-on-node-click="onNodeClick"></recursive-list-item> \
</li> \
</ul>',
};
}]);
e aqui está o ajudante:
app.factory('RecursionHelper', ['$compile', function ($compile) {
var RecursionHelper = {
compile: function (element) {
var contents = element.contents().remove();
var compiledContents;
return function (scope, element) {
if (!compiledContents) {
compiledContents = $compile(contents);
}
compiledContents(scope, function (clone) {
element.append(clone);
});
};
}
};
return RecursionHelper;
}]);
Tudo funciona como um encanto, mas eu não entendoon-node-click
trabalhar. Para todos os itens raiz, o 'retorno de chamada' funciona bem, mas a partir daí, todos os filhos não dispararão o retorno de chamada. Eu acho que tem algo a ver com a passagem da referência de função para o próximo filho no modelo.
Eu também tenteidata-on-node-click="onNodeClick(node)"
, mas isso não funciona também.
Alguém sabe como passar a referência de função para os nós filhos?