Javascript 服务变量更改时不更新作用域值

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

在这里你可以看到一个

我还阅读了答案，其中指出，每当我为所选的

指定一个新值时，当作用域指向旧位置时，我可能会替换与之关联的
内存位置。
但是，即使尝试只修改它的
名称
属性，而不是分配一个新对象，我也没有得到任何乐趣。
您遇到了对象引用问题。解决此问题的最简单方法是更改服务以返回setter和getter

main.service.js

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

box.component.js

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

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


{{$ctrl.selected.name}
很高兴它起作用了。我刚刚意识到我提供的示例中有一行不必要的代码。在box组件中，您不需要
mainService.selected=box
，因为
box
已经是一个引用对象。我的错。
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
        }
    }
});

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

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