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：（在视图中显示为圆圈）：

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;
        }
    };
});

当我点击一个圆圈时，我想切换到相应的对象，因此显示其参数，但这不起作用。似乎参数视图仅由盒控制器更新。我的list.component.js可能出错了，我试图将圆圈设置为选中状态？

 this.selected = function (value) {

            var nodes = UiService.getNodesHolder();

            UiService.selected = nodes.children[value];

        }

Live example here

Answer 1

The point here is to keep the object same, there are two things what I found here,

First, since you are keeping the object same then, when add box function runs the same object is manipulated, that is all the values in the array takes the value of the latest modification. So, to counter it I created a new copy of the box object while pushing it to array.

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

Second, in list component.js you are not updating mainService.selected so I changed

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

Now, another problem arises, because of the first solution. Since, I am making a copy of the object, the value that gets set in mainService.selected is different than the previous value that was in it. So to keep the object same i have created two funtions

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.
   }

Finally, here is the working plunk, https://plnkr.co/edit/Tk8YstW83NKwnYtbQZnM?p=preview

Answer 2

实际上当你在 box.component.js 文件中将其更改为objet模型时。

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

然后选中的圆圈显示正确的值。请使用 list.component.js 文件中的console.log(UiService.selected);进行检查。

list.template.html 文件中的一些小错误会更改为<div id="list" class="list">。实际上，在您的plnkr中就是这样的{ {1}}。对不起，我可以继续这么做，只需要一些时间才能让它发挥作用。

范围值仅从一个控制器

2 个答案: