How to access parent controller data inside a loop - angularjs

Question

I have a problem with angularJS.
I have a controller that execute a loop. For every element in the list I display all the informations.
Inside every loop, I added another controller (I guess is not a best practice already).
From the inner controller i want to access data from the outer controller.
Now, I don't mind doing this by assigning metadata on the html code, or by javascript code in the controller.
Here what I have done:
<div ng-controller="PostListCtrl">
<div ng-repeat="e in posts" class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
<div class="galleryElement effect6">
<div class="innerGalleryElement">
<div>
<img class="img-responsive" src="" /><!--{{e.Post.cover}}-->
</div>
<div class="lowerBarHolder">
<div class="float-left avatar">
<div class="shadow">
<img src="{{e.Post.author_avatar}} " />
</div>
</div>
<div class="float-left description">
{{e.Post.title}} <br />
{{e.Post.author}}
</div>
<div ng-controller="PostHeart" class="likeHolder" ng-init="isActive={{e.Post.isActive}}">
<button ng-click="toggleActive($index)"
ng-class="{true: 'loveButtonActive', false: 'loveButton'}[isActive]"
class="">❤</button>
</div>
</div>
</div>
</div>
</div>
This code: ng-init="isActive={{e.Post.isActive}} doesn't work as supposed.
I also tried to assign with data-myData="{{e.Post.isActive}} but at runtime when i tried to access myData from the controller it does access the string {{e.Post.isActive}} instead of accessing the replacement of that placeholder.
Any idea?

Answer 1

Create a directive:
yourModule.directive('postHeart', function() {
return {
restrict: 'E',
scope: {
'e': '=',
'index': '='
},
controller: function($scope) {
var isActive = $scope.e.Post.isActive;
$scope.btnClass = isActive ? 'loveButtonActive' : 'loveButton';
$scope.toggleActive = function(index) {
var postId = $scope.e.Post.id; // access data from the parent controller
// ...
};
},
template: "<button ng-click=\"toggleActive(index)\" ng-class=\"btnClass\">❤</button>"
};
});
Then use it in template:
<div ng-controller="PostListCtrl">
<div ng-repeat="e in posts" class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
<div class="galleryElement effect6">
<div class="innerGalleryElement">
<div>
<img class="img-responsive" src="" /><!--{{e.Post.cover}}-->
</div>
<div class="lowerBarHolder">
<div class="float-left avatar">
<div class="shadow">
<img src="{{e.Post.author_avatar}} " />
</div>
</div>
<div class="float-left description">
{{e.Post.title}} <br />
{{e.Post.author}}
</div>
<post-heart e="e" index="$index" class="likeHolder"></post-heart>
</div>
</div>
</div>
</div>