範圍值接收更新

我有一個按鈕，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

來源

2016-07-11 leota

與例如亂搞（添加一個'的console.log（值）'來選擇），不管你點擊哪個圈子，'id'都是一樣的 – Vasseurth

@Vasseurth - 的確如此。實際上，在我原來的項目中，它返回了我正確的ID，它只是不更新視圖。我搞砸了一些試圖推斷這個問題的例子。我會盡力修復它 – leota

在這裏點是保持目標一致，有兩件事情是我在這裏找到，

首先，由於要繼續使用對象相同的話，當外接盒功能運行在同一個對象進行操作，那是數組中的所有值都取最近一次修改的值。所以，爲了對付它，我創建了一個box對象的新副本，同時將它推到數組中。

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

其次，在列表component.js你沒有更新mainService.selected所以我改變

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

現在，另一個問題出現了，因爲第一個解決方案。因爲，我正在製作對象的副本，在mainService中獲取的值設置爲。選定的與之前的值不同的是。因此，要保持相同的對象我已經創建了兩個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. }

最後，這裏是工作普拉克， https://plnkr.co/edit/Tk8YstW83NKwnYtbQZnM?p=preview

來源

2016-07-11 19:16:06

好工作，我試了很多，但無法找到。 – htoniv

太棒了！我無法使它工作，你讓我的一天！ – leota

其實當u改變這種成客體模型在box.component.js文件。

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

然後選定的圓圈顯示正確的值。請使用console.log(UiService.selected);在list.component.js文件中檢查。

和一些小錯誤list.template.html文件更改爲<div id="list" class="list">。實際上它是這樣的在你的plnkr <div id="list"class"list">。對不起，我可以繼續這麼多，只有我需要一些時間來使它工作。

來源

2016-07-11 16:24:03 htoniv

感謝您的幫助，但現在參數沒有顯示:( – leota

範圍值接收更新

回答

相關問題