问题描述:

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;

}

});

网友答案:

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();
    });    
});
网友答案:

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]);
    }

});
相关阅读:
Top