Значение области, не обновляющейся при изменении служебной переменной

Question

У меня есть компонент (parms-bar.component.js), который должен обновляться, когда я нажимаю кнопку (box.component.js), но этого не происходит. Я пытаюсь дать им возможность общаться с помощью «выбранной» переменной в сервисе (main.service.js). При запуске приложения «тестовый узел» отображается моим компонентом «парм-бар». При нажатии кнопки он должен перейти в «Вставка», но это не так.

Здесь вы можете увидеть live example

Я также прочитал ответ на this question, который говорит, что я, вероятно, заменить ячейку памяти, что мой selected связан всякий раз, я задаю ему новое значение в то время как область застревает, указывая на старое местоположение. Но даже пытаясь изменить только его свойство name, вместо того, чтобы назначать новый объект, я не получил радости.

Answer 1

У вас возникли проблемы с ссылкой на объекты. Самый простой способ исправить это - изменить сервис, чтобы вернуть сеттер и 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>