0

I am writing an angular app where a parent controller manages the global state, and it transitions between states to display information to users.

I followed this answer and used params to send objects to the child component/controller. It works fine, but if I update the values in the child object, these changes are not reflected in the parent.

My code is organised like this:

index.html

<bodyng-controller="main-loop">
...
  <li ui-sref="supernova({data:data})" ui-sref-active="active">

data is an object, {"a":1,"b":2}

routes

.state("supernova", {
  component: 'supernova',
  params: { 'data': null }

component

component('supernova', {
  templateUrl: 'views/supernova.html',
  controller: ['$stateParams', supernova],
  controllerAs: 'supernova'
});

controller

function supernova($stateParams) {
  var ctrl = this;
  ctrl.data= $stateParams.data;

I can read the value of data fine from both the view and the controller. However if I make a change like this:

  ctrl.stuff = function () {
    ctrl.data.a = 20;

The changes are visible in the component but not in the parent controller.

Is there any way to share the same object instance between both using ui-router constructs? That is, changes in one are reflected in the other (in a two-way binding style).

Community
  • 1
  • 1
angarg12
  • 151
  • 5
  • question seems to be little unclear.. I don't understand what exactly you want to achieve.. Although, did you check `$state.params`(before that inject `$state` service)? that would have all states parameter.. – Pankaj Parkar May 13 '17 at 19:10
  • @PankajParkar I'm sending an object to the component as a param. I want changes in this object to be visible in the parent. That is not the case with the code that I show. – angarg12 May 13 '17 at 22:16

0 Answers0