AngularJS 更新服务变量不起作用

Question

我有一张图片列表。一个挨着另一个。我正在尝试捕获单击的图像，填充模式 div 并显示它。

标记

    <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>

一开始显示{"name":"Test"}，没问题。单击后它不会更新，即使我相信我在单击时更改了服务内部的变量。

控制器

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

服务

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

});

Answer 1

您没有在 Portfolio Ctrl 控制器中插入依赖注入 ModalService

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

});

Answer 2

您的 ModalCtrl 控制器函数只被调用一次，当遇到模态进入 DOM 时。这意味着 $scope.info 设置为 ModalService.getInfo() 返回的初始值并且从未更改。

您可以观察 getInfo 返回值的变化：

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

AngularJS 更新服务变量不起作用

AngularJS Update Service Variable Not Working

javascript

jquery

angularjs

angular-services