Using 'controller as' syntax to pass object values to parent controller

Question

When using the $scope controller syntax, it's simple to set a value on a parent controller's object. For example

<div ng-controller="ParentController">
    {{myValue.a}}
    <div ng-controller="ChildController">
        {{myValue.a}}
    </div>
</div>

 

app.controller('ParentController', function($scope) {
    $scope.myValue = {};
    $scope.myValue.a = 1;
});
app.controller('ChildController', function($scope) {
    $scope.myValue.a = 2;
});

The above outputs:

2
2

Is there a way to achieve the same functionality with the controller as syntax without referencing $scope in the child controller?

Answer 1

You could do it using a service, or you could do it referencing the scope.

The behavior that you are using, scope inheritance, is often referred to as an unwanted side affect. This is why isolated scopes are used with the controllerAs syntax.

In the following example you can see we achieve the same result using sharing the myValue property on the $scope along with the controllerAs syntax.

angular.module('app', [])

.controller('ParentController', ParentController)
  .controller('ChildController', ChildController);

ParentController.$inject = ['$scope'];

function ParentController($scope) {
  this.myValue = {};
  this.myValue.a = 1;

  $scope.myValue = this.myValue;
}

ChildController.$inject = ['$scope'];

function ChildController($scope) {
  this.myValue = $scope.myValue;

  this.myValue.a = 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="ParentController as parent">
    parent: {{parent.myValue.a}}
    <div ng-controller="ChildController as child">
      child: {{child.myValue.a}}
    </div>
  </div>
</div>

This can be accomplished without $scope using a service:

angular.module('app', [])

.controller('ParentController', ParentController)
  .controller('ChildController', ChildController)
  .service('valueService', ValueService);

ParentController.$inject = ['valueService'];

function ParentController(valueService) {
  this.myValue = {};
  this.myValue.a = 1;

  valueService.setValue(this.myValue);
}

ChildController.$inject = ['valueService'];

function ChildController(valueService) {
  this.myValue = valueService.getValue();

  this.myValue.a = 2;
}

function ValueService() {

  var storedValue;

  this.getValue = function() {
    return storedValue;
  }

  this.setValue = function(value) {
    storedValue = value;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="ParentController as parent">
    parent: {{parent.myValue.a}}
    <div ng-controller="ChildController as child">
      child: {{child.myValue.a}}
    </div>
  </div>
</div>