Question

我有一个组件（parms-bar.component.js）应该在我点击按钮（box.component.js）时更新，但它没有发生。我试图让他们使用＆＃34;选择＆＃34;服务中的变量（main.service.js）。当您启动应用程序＆＃34;测试节点＆＃34;由我的＆＃34; parms-bar＆＃34;显示零件。在按钮上单击它应该更改为＆＃34; Box＆＃34;，但它不是。

在这里，您可以看到live example

我还阅读了this question的答案，该答案说我可能会在每次为其分配新值时替换我selected关联的内存位置范围被指向旧位置。但即使尝试仅修改其name属性，而不是分配新对象，我也没有任何乐趣。

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

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

1 个答案: