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

Scope value not updating when service variable changes

本文关键字：更新 范围 变量 服务      更新时间：2023-09-26

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

在这里你可以看到一个活生生的例子

我还阅读了这个问题的答案，它说每次我为我的selected分配一个新值时，我可能会替换与我的关联的内存位置，而范围则指向旧位置。但是，即使尝试只修改其name属性，而不是分配一个新对象，我也没有感到高兴。

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

主服务.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>
相关文章：