AngularJS using child $state controllers to add properties to objects on a parent's scope

Question

I have a parent state:

.state('contact', {
  url: '...',
  templateUrl: '...',
      controller: function ($scope) {
      $scope.object.property = ['item1', 'item2', 'item3']
  }
})

And its child:

.state('contact.list', {
  url: '...',
  templateUrl: '...', 
  controller: function ($scope) {
    var parentObj = $scope.$parent.object.property[1];
  })

As you can see, the state 'contact.list' is a child of the state 'contact', and therefore 'contact.list' has a child scope. I am using the variable parentObj to store a reference to the object in the parent, $scope.object.property.

Anyways, what I would like to do would be to add items onto the scope in the child scope, and have them be added to the object in the parent scope.

For example, if it were possible, it would be cool to be able to add some properties to the child object:

.state('contact.list', {
  url: '...',
  templateUrl: '...', 
  controller: function ($scope) {
    var parentObj = $scope.$parent.object.property[1];
    $scope.parentObj.newProperty = 'im a new property!';
  })

And have this added to the parent controller, which would then optimally have a scope that has:

$scope.object.property[1].newProperty

Unfortunately, as far as I know, it's not possible to refer to $parent scopes in this way, and I don't want to have to go and declare:

.state('contact.list', {
  url: '...',
  templateUrl: '...', 
  controller: function ($scope) {
    $scope.$parent.object.property[1].newProperty = 'im a new property!';
    $scope.$parent.object.property[1].secondNewProperty = 'im the second new property!';
    $scope.$parent.object.property[1].thirdNewProperty = 'im the third new property!';
  })

for every single item I am trying to send to the parent. If there is any way to achieve this, any advice would be greatly appreciated.

`$scope.$emit`, `$scope.$broadcast` are valid ways as well. – Callum Linington May 19 '15 at 09:37 — Callum Linington, May 19 '15 at 09:37

score 1 · Accepted Answer · edited May 23 '17 at 12:21

I would say, that this could be achieved really easily. Just create a reference object in parent $scope.. and all will work as expected

.state('contact', {
  url: '...',
  templateUrl: '...',
      controller: function ($scope) {
        $scope.Model = {};
  }
})

There is a working example, related to this Q & A:

Destroy scope before change path in ui-router

The state def:

.controller('ParentCtrl', ['$scope', function ($scope) { 
  $scope.Model = {
    SharedName: "This is shared name",
  }
  $scope.NotSharedName = $scope.NotSharedName 
                      || "This name is cloned, but then lives its own way";
}])
.controller('ChildCtrl', ['$scope', function ($scope) {}])

Great if that helped anyhow ;) Enjoy mighty UI-Router, sir! – Radim Köhler May 19 '15 at 09:43 — Radim Köhler, May 19 '15 at 09:43

AngularJS using child $state controllers to add properties to objects on a parent's scope

1 Answers1