Custom Directive Not Working Within ng-repeat - angularjs

Question

Hello All: This is my first time asking a question here....
billWatch.HTML
<ul class="border-and-bg vote-unordered-list bill-link-font">
<li><a ng-click='bill.yea = bill.yea + 1;ctrl.voteYea(1, bill.id, bill.yea)'>Yea</a>:{{bill.yea}} | <a ng-click='bill.nay = bill.nay + 1; ctrl.voteYea(0, bill.id,bill.nay)'>Nay:{{bill.nay}}</a> | **<a ng-click="showComments()">{{filtered.length}} comments</a>**
</li>
</ul>
<div ng-mdoel='ctrl.commentsSection' ng-repeat='($index, comment) in ctrl.billComments | reverseComments | filter: comment.bill_id = bill.id as filtered' class="comments-container" >
<div>
<show-comment></show-comment>
<ul>
<li>{{comment.user_name}} | {{comment.comment}} </li>
</ul>
<!-- <ul>
<li ng-bing-html>
<my-comment></my-comment>
</li>
</ul> -->
</div>
</div>
billwatch.ctrl.js
(function(){
angular
.module('ccApp')
.controller("BillWatchCtrl', function BillWatchCtrl(){
})
})();
showComment.dir.js
angular.module('ccApp')
.directive('showComment', function(){
function link(scope,element,attrs){
scope.showComments = function(){
console.log('showComment');
}
}
return {
restrict: 'EA',
link:link
};
})
I've omitted most of the controller code. I'm only trying to log 'showComment' in the console on-click of a anchor tag. It works outside of the ng-repeat block but not inside of it. Can someone help?
Thanks!

Answer 1

Disclaimer:
We could make a much tinier example or actually recommend to use different approaches, but since it seems you are still in the 'technical exploration' phase of your project, I'm simply gonna give you a hand with exactly what you ask :).
The problem you have is that the scope that gets passed to the link function of your directive is not the same as the one outside your ng-repeat.
That is because the ng-repeat directive creates a new scope for each element.
If you want to attach a function showComments on the outside scope from within your ng-repeat, you'd have to do, in the link callback:
scope.$parent.showComments = function () {/*...*/};
Instead of:
scope.showComments = function () {/*...*/};
However, this way, you're re-assigning your parent's $scope.showComments function for every comment. Once would be enough!
Thus, I suggest simply pulling your <show-comment /> element outside the ng-repeat. The directive will be attached to its container's scope and will properly set your showComments function where you expect it to be, once.
Check out the working snippet below, where I simply:
concatenated all the code you gave us
moved the <show-comments /> element up
angular
.module('ccApp', [])
.controller('BillWatchCtrl', function BillWatchCtrl() {
})
.directive('showComment', function() {
function link(scope, element, attrs) {
scope.showComments = function() {
console.log('showing comments...');
}
}
return {
restrict: 'EA',
link: link
};
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div ng-app="ccApp">
<ul class="border-and-bg vote-unordered-list bill-link-font">
<li><a ng-click='bill.yea = bill.yea + 1;ctrl.voteYea(1, bill.id, bill.yea)'>Yea</a>:{{bill.yea}} | <a ng-click='bill.nay = bill.nay + 1; ctrl.voteYea(0, bill.id,bill.nay)'>Nay:{{bill.nay}}</a> | **<button ng-click="showComments()">{{filtered.length}} comments</button>**
</li>
</ul>
<show-comment></show-comment>
<!-- Moved show-comments HERE -->
<div ng-model='ctrl.commentsSection' ng-repeat="($index, comment) in ctrl.billComments | orderBy: '[]': true | filter: comment.bill_id = bill.id as filtered" class="comments-container">
<!-- Instead of THERE -->
<div>
<ul>
<li>{{comment.user_name}} | {{comment.comment}}</li>
</ul>
</div>
</div>
</div>