javascript - 范围值仅从一个 Controller 接收更新

Question

我有一个按钮，box.component.js:

angular.module('box').component('box', {
    templateUrl: 'box.template.html',
    controller: function boxController(mainService, UiService){
        this.addBox = function () {

            //Set box as selected
            var box = mainService.selected;
            var nodesHolder = UiService.getNodesHolder().children;

            //Set custom properties
            box.name = "Box";
            box.id = nodesHolder.length;
            box.parameters = {
              parm1:  Math.floor((Math.random() * 10) + 1), 
              parm2:  Math.floor((Math.random() * 10) + 1), 
              parm3:  Math.floor((Math.random() * 10) + 1)

            };
            //Push box into nodes holder array
            nodesHolder.push(box);
        }
    }
});

单击时，它会创建一个填充数组的对象，我的list.component.js:(在 View 中显示为圆圈):

angular.module('list').component('list', {

    templateUrl: 'list.template.html',

    controller: function nodesController(UiService) {

        this.nodes = UiService.getNodesHolder().children;

        this.selected = function (value) {

            var nodes = UiService.getNodesHolder();

            UiService.selected = nodes.children[value];

        }


    }

});

并且还通过parms-bar.component显示其名称和参数:

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

这些组件之间的通信由两个服务管理。检测所选对象的一个​​，main.service.js:

angular.module('app').service('mainService', function(){
    var selected = {};

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

以及返回列表中的项目(圆圈)的一个，ui.service.js:

angular.module('app').service('UiService', function(){

    //Nodes-holder
    var nodesHolder = { children: []};

    return {

        getNodesHolder: function () {
            return nodesHolder;
        }
    };
});

当我单击一个圆圈时，我想切换到相应的对象，因此显示其参数，但这不起作用。似乎参数 View 仅由框 Controller 更新。也许我尝试将圆圈设置为选定的 list.component.js 出现问题？

 this.selected = function (value) {

            var nodes = UiService.getNodesHolder();

            UiService.selected = nodes.children[value];

        }

Live example here

Answer 1

这里的重点是保持对象相同，我在这里发现了两件事，

首先，由于您保持对象相同，因此当添加框函数运行时，会操作相同的对象，即数组中的所有值取最新修改的值。因此，为了应对它，我创建了盒子对象的一个​​新副本，同时将其推送到数组。

nodesHolder.push(angular.copy(box));

其次，在列表 component.js 中，您没有更新 mainService.selected，因此我进行了更改

UiService.selected = nodes.children[value];
              to
mainService.selected = nodes.children[value];

现在，由于第一个解决方案，另一个问题出现了。由于我正在复制该对象，因此在 ma​​inService.selected 中设置的值与其中的先前值不同。因此，为了保持对象相同，我创建了两个函数

1. function clearObject(obj){
         // Function that cleans up the keys of the given object 
         // without creating a new object.
   }

2. function copyData(obj) {
       // Function that copies the new object data to selected.
   }

最后，这是工作原理， https://plnkr.co/edit/Tk8YstW83NKwnYtbQZnM?p=preview