CODEWITHSUNDEEP
angularjs
Snick
Snick

Reputation: 1042

How to access parent controller data inside a loop

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="">&#x2764;</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?

Upvotes: 0

Views: 84

Answers (1)

wachme
wachme

Reputation: 2337

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\">&#x2764;</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>

Upvotes: 1

Related Questions