How can I achieve the following using Controller-As approach:
app.controller("parentCtrl", function($scope){
$scope.parentObj = {prop1: "not set", prop2: "something"};
$scope.doSomething = function(){...}
})
.controller("childCtrl", function($scope){
$scope.parentObj.prop1 = "changed";
});
<div ng-controller="parentCtrl">
{{prop1}}
<div ng-controller="childCtrl">
{{prop2}}
<button ng-click="doSomething()">Do</button>
</div>
</div>
without making assumptions about how the parent controller is aliased in the view, i.e. no {{pc.prop2}}
.
In other words, I would like to benefit from scope inheritance while using Controller-As approach. The question is How?
app.controller("parentCtrl", function(){
this.parentObj = {prop1: "not set", prop2: "something"};
this.doSomething = function(){...}
})
.controller("childCtrl", function($scope){
// $scope.parentObj is undefined!
});