In my parent directive, I am able to access controller functions using the $parent operator. However, this method does not work in recursive child directives. Here is a shortened example of the issue:
// Sample controller code (using controllerAs):---
var View2Ctrl = function(){
// The function I'm trying to access:
this.getNumber = function(){
return 5;
}
.
.
.
angular.controller('View2Ctrl',............
// 'comments' directive template:--
<li>
<!-- Trying to access the function here: -->
<!-- This line works only once here and doesn't load in recursive child directives below: -->
<strong> Number: </strong> {{ $parent.View2Ctrl.getNumber() }}
<!-- This line gets replaced with a recursive child directive again -->
<span class="comments-placeholder" ></span>
</li>
// 'comments' directive.js:---
var comments = function($compile){
return {
templateUrl : 'modules/comments/commentsDirective.html',
restrict:'E',
scope:{
collection: '='
},
link: function(scope, element, attrs){
if(scope.collection.data.replies){
var elementResult = angular.element(element[0].getElementsByClassName('comments-placeholder'));
elementResult.replaceWith($compile('<ul ng-repeat="comment in collection.data.replies.data.children><comments collection="comment"></comments></ul>')(scope));
}
}
};
};