After researching, I came to the following realization:
Controller-As approach is NOT a substitute for using
$scope
. Both have their place, and can/should be used together judiciously.
$scope
does exactly what the name implies: i.e. it defines ViewModel properties on the$scope
. This works best for sharing scope with nested controllers that can use the$scope
to drive their own logic or to change it.- Controler-As defines the entire controller object as a ViewModel with a named scope (via the controller’s alias). This works best only in the View (but not other controllers), if the View decides if it wants to reference a specific controller ViewModel.
Here’s an example:
var app = angular.module('myApp', []);
// Then the controllers could choose whether they want to modify the inherited scope or not:
app.controller("ParentCtrl", function($scope) {
this.prop1 = {
v: "prop1 from ParentCtrl"
};
$scope.prop1 = {
v: "defined on the scope by ParentCtrl"
};
})
.controller("Child1Ctrl", function($scope) {})
.controller("Child2Ctrl", function($scope) {
// here, I don't know about the "pc" alias
this.myProp = $scope.prop1.v + ", and changed by Child2Ctrl";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="ParentCtrl as pc">
<div ng-controller="Child1Ctrl">
<div>I know about the "pc" alias: {{pc.prop1.v}}</div>
</div>
<div ng-controller="Child2Ctrl as ch2">
<div>I only care about my own ViewModel: {{ch2.myProp}}</div>
</div>
</div>