仅从一个控制器接收更新的范围值。
我有个按钮，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);
}
}
});单击时，它会创建一个填充数组的对象，Mylist.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;
}
};
});当我点击一个圆圈，我想切换到相应的对象，所以显示它的参数，但这不是working.It似乎参数视图只得到更新的盒子控制器。也许在我的list.component.js中有什么问题，我试图将圆圈设置为所选的？
this.selected = function (value) {
var nodes = UiService.getNodesHolder();
UiService.selected = nodes.children[value];
}回答 2
Stack Overflow用户
发布于 2016-07-11 19:16:06
重点是保持物体不变，我在这里发现了两件事，
首先，由于保持对象不变，那么，当add box函数运行时，相同的对象将被操作，也就是说数组中的所有值都接受最新修改的值。因此，为了对抗它，我创建了一个box对象的新副本，同时将它推送到数组中。
nodesHolder.push(angular.copy(box));第二，在list component.js中，您没有更新mainService.selected，所以我更改了
UiService.selected = nodes.children[value];
to
mainService.selected = nodes.children[value];现在，另一个问题出现了，因为第一个解决方案。由于我正在复制对象，所以在mainService.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
Stack Overflow用户
发布于 2016-07-11 16:24:03
实际上，当您将其转换为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"> .Actually，在plnkr <div id="list"class"list">中是这样的。对不起，我可以继续这么做，只是我需要一些时间才能让它运转起来。
https://stackoverflow.com/questions/38309732
复制相似问题
腾讯云开发者
