$scope vs. this in angularjs

Directly answering your question

Is there a way to pass the function $scope.onto the variable vm?

No. They are different things. The function $onis a property of scopes used to emit events, it has nothing to do with the value of thisin a controller.

I explain.

The reason for your confusion is because you think that $scopeand thishave some kind of direct relationship and this is not the case, in reality it thisis just one more property associated with $scopeyour controller (just like $onand $emit).

Reviewing:

Every time you create a controller, a new $scopeone is created internally using the method $scopepadre.new(), this happens because it ng-controlleris a directive that is created with the following configuration

var ngControllerDirective = [function() {
  return {
    restrict: 'A',
    scope: true,
    controller: '@',
    priority: 500
  };
}];

The part that says scope: trueis what is responsible for informing the service $compilethat a new $scope.

You can think of the scope and its properties as the data that is used to render the view. The scope is the single source of truth for everything related to the view.

How does he get thisinto all this?

Your controllers are always created as some kind of class (this is why they should be named in uppercase by convention), like this

new MyCtrl();

If you read how the operator works newin javascript and what its impact on the value of this(check step 2) you will realize that when you create an object in this way any property you add to thisit is being added to the "instance of the class" as such. This is purely a comparison since there are no classes in javascript but I think it illustrates the point pretty well.

What does all of the above have to do with thisangular?

Well, when you use the option controllerAsin this way 'MyController as foo', all you do is tell Angular to create a new property called 'foo'in the $scope associated with the element and to assign the newly created controller instance to that property.

The latter is important to understand well, scopes are not a feature of controllers, scopes are associated with DOM elements, the most notable example of this is the directive ng-repeatthat creates a new one $scopefor each element of a collection.

We are going to compare the traditional notation with the notation controllerAsso you can see what the differences are

angular.module('app', [])
  // Notación tradicional
  .controller('Sample1Ctrl', function($scope) {
    $scope.vm = {};
    $scope.vm.mensaje = 'Instancia tradicional';

    $scope.$on('event', function() {
      //haz algo en este evento
    });
  })
  // Notación controller as
  .controller('Sample2Ctrl', function($scope) {
    var vm = this;
    vm.mensaje = 'Instancia controllerAs';

    $scope.$on('event', function() {
      //haz algo en este evento
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="Sample1Ctrl">
    {{vm.mensaje}}
  </div>
  <div ng-controller="Sample2Ctrl as vm">
    {{vm.mensaje}}
  </div>
</div>

In this example, in both controllers, a named property vmis created with an empty object and properties are added to it that are bound in the view. In the traditional way you have to do all these steps manually while in the traditional way controllerAsthis is not necessary since when objects are instantiated in javascript a new empty object is created (step 1). The property in $scopeit is created in the same declaration as the directive.ng-controller="SampleCtrl as vm"

What is this for?

Well, because angular is javascript it is sometimes necessary to use a .(or what is known as "dot notation") to reference some objects since in javascript these references can be lost due to how the prototypical inheritance works in angular (and in javascript generally). This way we make sure that we are referencing the correct object.

In the following example you are not using dot notation so when you edit the property in the child controller it works as expected but when you try to do it in its parent it does nothing.

angular.module('app', [])
  .controller('PadreCtrl', function($scope) {
    $scope.prop1 = 'Padre';
  })
  .controller('HijoCtrl', function($scope) {
    $scope.prop2 = 'Hijo'
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="PadreCtrl">
    {{prop1}}
    <div ng-controller="HijoCtrl">
      {{prop2}}
      <div>
        <input ng-model="prop1">

      </div>
      <div>
        <input ng-model="prop2">
      </div>
    </div>
  </div>
</div>

This would be the correct way to do it

angular.module('app', [])
  .controller('PadreCtrl', function() {
    // La variable que uses aqui es irrelevante pero por comodidad
    // debe corresponder con la que usaste en la vista
    var foo = this;
    foo.prop1 = 'Padre';
  })
  .controller('HijoCtrl', function($scope) {
    var vm = this;
    vm.prop2 = 'Hijo'
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="PadreCtrl as padre">
    {{padre.prop1}}
    <div ng-controller="HijoCtrl as hijo">
      {{hijo.prop2}}
      <div>
        <input ng-model="padre.prop1">

      </div>
      <div>
        <input ng-model="hijo.prop2">
      </div>
    </div>
  </div>
</div>

In short controllerAs, it ensures that we do not fall into traps like that, we just have to understand how it works. He $scopestill has the same responsibilities as always (do $watch, $emit, $broadcast, etc) and thishe is not intended in any way to replace the functionality of it. It simply guarantees us good practices and sometimes saves us from having to inject $scopeif it is not necessary.

Here I leave you some articles (in English unfortunately) in which you can find more details of the subject in question

https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs

http://www.egghead.io/video/DTx23w4z6Kc

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y030

you should do something like this:

var vm = this;
vm.$scope = $scope
vm.$scope.$on('EVENT_NO_DATA', function(event, data){

I also recommend you read something about ES6 since you can generate object classes and methods with angular programming will be easier for you