I've encountered an issue with using ng-click within the template of a recursive directive.
Here is the code snippet: https://jsfiddle.net/qxz7506n/
While clicking the 'root load more button' works fine, the 'child load more button' does not function as expected. How can I pass the child object inside the ngclick through the directive to the controller scope and log it in the console?
HTML:
<div ng-app='demoA'>
<div ng-controller="IndexCtrl">
<collection collection='tasks' reply-msg="replyMsg(data)" load-more="loadMore()">
</collection>
</div>
</div>
Collection Directive:
.directive('collection', function () {
return {
restrict: "E",
replace: true,
scope: {
collection: '=',
member: '=',
replyMsg: '&',
loadMore: '&'
},
template: "<ul><member ng-repeat='member in collection track by $index' floor='$index + 1' member='member' reply-msg='replyMsg({data: member.name})'></member><li><input type='button' value='load more...' ng-click='loadMore()' /></li></ul>"
}
})
Member Directive:
.directive('member', function ($compile) {
return {
restrict: "E",
replace: true,
scope: {
floor: '=',
member: '=',
replyMsg: '&',
loadMore: '&'
},
template: "<li>" +
"<div ng-if='member.isReply'>#{{floor}}</div>" +
"<div>{{member.name}}</div>" +
"<div ng-if='!member.isReply'><input type='button' value='Reply' ng-click='replyMsg({data: member.name})'/></div>" +
"</li>",
link: function (scope, element, attrs) {
if (angular.isArray(scope.member.children)) {
element.append("<collection collection='member.children' reply-msg='replyMsg({data: member.name})' load-more='loadMore()'></collection>");
$compile(element.contents())(scope)
}
}
}
})
For example,
When I click the 'root load more button,' it passes through the directive to the controller scope and logs an object including "Europe" and "South America."
Similarly, when I click the 'child load more button,' it should also go through the directive to the controller scope and display an object containing "Italy" and "Spain."