服务变量更改时范围值不更新答案

【问题标题】：Scope value not updating when service variable changes服务变量更改时范围值不更新
【发布时间】：2016-07-10 00:44:31
【问题描述】：

我有一个组件 (parms-bar.component.js)，当我单击按钮 (box.component.js) 时它应该会更新，但它没有发生。我试图让他们使用服务（main.service.js）中的“选定”变量进行通信。当您启动应用程序时，我的“parms-bar”组件会显示“测试节点”。在按钮上单击它应该变为“Box”，但它不是。

在这里你可以看到live example

我还阅读了this question 的答案，其中说我可能会替换与我的selected 关联的内存位置，每次我为其分配一个新值时，而作用域卡在指向旧值时地点。但即使尝试只修改其name 属性，而不是分配一个新对象，我也没有任何乐趣。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您遇到了对象引用问题。解决此问题的最简单方法是将您的服务更改为返回 setter 和 getter。

main.service.js

angular.module('app').service('mainService', function(){
    var selected = {name: "test node"};

    var service = {
        get selected(){
            return selected;
        },
        set selected(value){
            selected = value;
        }
    }
    return service;
});

现在您可以更改其他模块以直接获取和设置此对象。

box.component.js

angular.module('box').component('box', {
    templateUrl: 'box.template.html',
    controller: function boxController(mainService){
        this.addBox = function () {
            var box = mainService.selected;
            //Set custom properties
            box.name = "Box";
            //Set as selected
            //mainService.selected = box; <-- This is not needed
        }
    }
});

parms-bar.component.js

angular.module('parms-bar').component('parmsbar', {
    templateUrl: 'parms-bar.template.html',
    controller: function parmsController(mainService){
        this.selected = mainService.selected;
    }
});

然后在您的 parms-bar.template.html 中使用该对象

<div id="parms-bar">
    <a>
        {{$ctrl.selected.name}}
    </a>
</div>

【讨论】：

很高兴它成功了。我刚刚意识到我提供的示例有一行不必要的代码。在 box 组件中，您不需要 mainService.selected = box，因为 box 已经是一个引用对象。我的错。