Wie übergebe ich eine Funktionsreferenz in einer rekursiven Direktive in Angular?
Ich habe diese Richtlinie:
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>',
};
}]);
Und hier ist der Helfer:
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;
}]);
Alles funktioniert wie ein Zauber, aber ich verstehe meinen nichton-node-click
arbeiten. Für alle Stammelemente funktioniert der Rückruf einwandfrei, von da an werden jedoch nicht alle Kinder den Rückruf auslösen. Ich denke, es hat etwas damit zu tun, die Funktionsreferenz an das nächste Kind in der Vorlage zu übergeben.
Ich habe es auch versuchtdata-on-node-click="onNodeClick(node)"
, aber das geht auch nicht.
Weiß jemand, wie der Funktionsverweis an die untergeordneten Knoten übergeben wird?