AngularJS Update Service Variable Not Working

Question

I have a list of images. One next to the other. I'm trying to capture which image was clicked, populate a modal div and show it.

Markup

    <section class="portfolio-grid column small-12" ng-controller="PortfolioCtrl">
    <ul class="small-block-grid-2 medium-block-grid-4">
        <li ng-repeat="portfolio in portfolios">
            <a ng-click="showModal($index)" title="">
                <img ng-src="{{portfolio.thumb}}" alt="">
                <div class="details">
                    <h4>{{portfolio.name}}</h4>
                </div>
            </a>
        </li>
    </ul>
</section>
======== Some Other HTML ========
<div class="popup" ng-controller="ModalCtrl">{{info}}</div>

At first it shows {"name":"Test"}, which is alright. After I click it does not get updated even though I believe I am changing the variable inside the service when I click.

Controller

app.controller("PortfolioCtrl", function($scope, $rootScope, PortfolioService, ModalService){
    $scope.portfolios = PortfolioService.list();
    $scope.showModal = function(index){
        ModalService.setInfo($scope.portfolios[index]);
    }

});
app.controller("ModalCtrl", function($scope, ModalService){
    $scope.info = ModalService.getInfo();
});

Service

app.service('ModalService', function(){
    var modalInfo = {"name":"test"};

    this.setInfo = function(data){
        modalInfo = data;
    };
    this.getInfo = function(){
        return modalInfo;
    };

});

app.service('PortfolioService', function(){
    var portfolios = [
        {"name":"Project Name 1", "thumb":"http://placehold.it/480&text=1", "bigImg":"http://placehold.it/1000x500&text=1", "description":"Description text 1", "linkToLive": "#"},
        {"name":"Project Name 2", "thumb":"http://placehold.it/480&text=2", "bigImg":"http://placehold.it/1000x500&text=2", "description":"Description text 2", "linkToLive": "#"},
    ]

    this.list = function(){
        return portfolios;
    }

});

You're missing a dependency for ModalService in PortfolioCtrl — Tibos
– Tibos, Commented May 16, 2015 at 5:30
i think your Controller: PortfolioCtrl needs the Service: ModalService as a dependency — Shehryar Abbasi
– Shehryar Abbasi, Commented May 16, 2015 at 5:32

Tibos · Accepted Answer · 2015-05-16 06:15:03Z

0

Your ModalCtrl controller function is only called once, when the modal is encountered into the DOM. This means that $scope.info is set to the initial value returned by ModalService.getInfo() and never changed.

You could watch for changes of the value returned by getInfo:

app.controller("ModalCtrl", function($scope, ModalService){
    $scope.$watch(function() { return ModalService.getInfo(); }, function(){
        $scope.info = ModalService.getInfo();
    });    
});

answered May 16, 2015 at 6:15

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fernando Claussen Over a year ago

This works as expected. I wasn't aware of how exactly $watch worked. Now I get it. If ModalService.getInfo() changes, it will trigger the getInfo() function for the $scope.info. NICE! Thank you!

Tibos Over a year ago

$watch gets two functions - the first returns a value and the second is a callback to be executed when the value returned by the first changes. Read more in the documentation - docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

Fernando Claussen Over a year ago

What should I do if I want to init a jquery plugin after the content is changed? I have a directive for this popup. I need to call flexslider after the content is done populating.

Fernando Claussen Over a year ago

Oh, nevermind. I got it working with this on my directive: link: function(scope, element, attr) { scope.$watch(function(){ return element.html(); }, function(){ element.find('.flexslider').flexslider({ animation: "slide", }); }); }

Ilya Dmitriev · Accepted Answer · 2015-05-16 05:44:49Z

0

You didn't insert dependecy injection ModalService in PortfolioCtrl controller

app.controller("PortfolioCtrl", function($scope, $rootScope, PortfolioService,ModalService ){
    $scope.portfolios = PortfolioService.list();
    $scope.showModal = function(index){
        ModalService.setInfo($scope.portfolios[index]);
    }

});

edited May 16, 2015 at 5:44

Ilya Dmitriev

1,7401 gold badge17 silver badges22 bronze badges

answered May 16, 2015 at 5:35

Venkatesh TR

785 bronze badges

Collectives™ on Stack Overflow

AngularJS Update Service Variable Not Working

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related