AngularJS 更新服务变量不起作用 [英] AngularJS Update Service Variable Not Working

查看:28
本文介绍了AngularJS 更新服务变量不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个图像列表.一个挨着另一个.我正在尝试捕获点击的图像,填充一个模态 div 并显示它.

标记

 
<ul class="small-block-grid-2 medium-block-grid-4"><li ng-repeat="投资组合中的投资组合"><a ng-click="showModal($index)" title=""><img ng-src="{{portfolio.thumb}}" alt=""><div class="详细信息"><h4>{{portfolio.name}}</h4>

</a></节>======== 其他一些 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 = 函数(索引){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 = 函数(数据){modalInfo = 数据;};this.getInfo = function(){返回模态信息;};});app.service('PortfolioService', function(){var 投资组合 = [{"name":"项目名称 1", "thumb":"http://placehold.it/480&text=1", "bigImg":"http://placehold.it/1000x500&text=1", "description":"描述文本 1", "linkToLive": "#"},{"name":"项目名称 2", "thumb":"http://placehold.it/480&text=2", "bigImg":"http://placehold.it/1000x500&text=2", "description":"描述文本 2", "linkToLive": "#"},]this.list = 函数(){回报投资组合;}});

解决方案

你的 ModalCtrl 控制器函数只会在 DOM 中遇到模态时调用一次.这意味着 $scope.info 被设置为 ModalService.getInfo() 返回的初始值并且永远不会改变.

你可以观察 getInfo 返回值的变化:

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

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

这篇关于AngularJS 更新服务变量不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆