Как передать ссылку на функцию в рекурсивной директиве в Angular?
У меня есть эта директива:
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>',
};
}]);
а вот и помощник:
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;
}]);
Все работает как шарм, но я не понимаюon-node-click
работать. Для всех корневых элементов «обратный вызов» работает нормально, но с этого момента все дети не будут запускать обратный вызов. Я думаю, что это как-то связано с передачей ссылки на функцию следующему дочернему элементу в шаблоне.
Я также пыталсяdata-on-node-click="onNodeClick(node)"
, но это тоже не работает.
Кто-нибудь знает, как передать ссылку на функцию на дочерние узлы?