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
– Callum Linington

2015-05-19 09:37:17 +00:00
Commented May 19, 2015 at 9:37 — Callum Linington
– Callum Linington, Commented May 19, 2015 at 9:37

Community · Accepted Answer · 2017-05-23 12:21:49Z

1

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

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered May 19, 2015 at 9:35

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Radim Köhler Over a year ago

Great if that helped anyhow ;) Enjoy mighty UI-Router, sir!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related