12

Estoy tratando de aprender , versión 1.x y usando this en lugar de $scope, haciendo var vm = this;. En general funciona correctamente, pero algunas ocasiones, con algunas funciones, me veo forzado a usar $scope para que funcione mi código.

Utilizo para esto, el tutorial de thinkster: Construyendo aplicaciones web con Django y AngularJS y el libro de SitePoint, AngularJS: De novato a ninja.

Al intentar adaptar el código del libro al usado en el tutorial de thinkster, me encuentro con que no siempre puedo usar la variable vm, por ejemplo:

En el libro el código de una función de ejemplo es:

angular.module('myApp.controllers', []);

// código eliminado para ahorrar espacio

angular.module('myApp.controllers').controller('StatsController', function($scope) {
  $scope.name = 'World';
  $scope.status = 'Connected';
  $scope.statusColor='green';
  $scope.$on('EVENT_NO_DATA', function(event, data) {
    console.log('received broadcasted event');
    $scope.status = data;
    $scope.statusColor='red';
    $scope.$emit('EVENT_RECEIVED');
}); });

Yo hago la adaptación de este código (según mi modo de entenderlo), así:

(function(){
  'use strict';

  angular.module('myEmit', [
    'myEmit.controllers',
  ]);

  angular.module('myEmit.controllers', [])
    .controller('MessageController', MessageController)
    .controller('StatController', StatController);

  function MessageController($scope, $timeout) {
    var vm = this;
    vm.messages = [{
      sender: 'user1',
        text: 'Mensaje 1'
    }];
    var timer;
    var count = 0;
    vm.loadMessages = function(){
      count++;
      vm.messages.push({
        sender: 'user1',
          text: 'Mensaje aleatorio ' + count
      });
      timer = $timeout(vm.loadMessages, 2000);
      if(count == 3){
        $scope.$broadcast('EVENT_NO_DATA', 'Not Connected');
        $timeout.cancel(timer);
      }
    };
    timer = $timeout(vm.loadMessages, 2000);
    $scope.$on('EVENT_RECEIVED', function(){
      console.log('Received emitted event');
    });
  };

  function StatController($scope) {
    var vm = this;

    vm.name = 'World';
    vm.status = 'Connected';
    vm.statusColor = 'green';
    $scope.$on('EVENT_NO_DATA', function(event, data){
      console.log('Received broadcast event');
      vm.status = data;
      vm.statusColor = 'red';
      $scope.$emit('EVENT_RECEIVED');
    });
  };
  
})();
<!DOCTYPE html>
<html ng-app='myEmit'>
  <head>
    <meta charset="utf-8">
    <title>AngularJS Events</title>
  </head>
  <body ng-controller="MessageController as mc">
    <h4>Mensajes:</h4>
    <ul>
      <li ng-repeat="mensaje in mc.messages">
        {{ mensaje.text }}
      </li>
    </ul>
    <div class="" ng-controller="StatController as sc">
      <h4>Estadísticas: </h4>
      <div class="">
        {{ mc.messages.length}} Mensaje(s)
      </div>
      <div class="">
        Estado: <span style="color: {{ sc.statusColor}}">
          {{ sc.status }}
        </span>
      </div>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</html>

Problema

Cuando intento usar este código,

  function StatController($scope) {
    var vm = this;

    vm.name = 'World';
    vm.status = 'Connected';
    vm.statusColor = 'green';
    vm.$on('EVENT_NO_DATA', function(event, data){
      console.log('Received broadcast event');
      vm.status = data;
      vm.statusColor = 'red';
      $scope.$emit('EVENT_RECEIVED');
    });
  };

el controlador StatController no funciona porque da el siguiente error

Error: vm.$on is not a function. (In 'vm.$on', 'vm.$on' is undefined)

Es decir, que vm.$on no es una función o es indefinida.

Pregunta

Al parecer, cuando uso var vm = this; no se transfiere el $scope a la variable vm y por lo tanto, funciones como $on no están accesibles en mi variable vm.

¿Existe alguna manera de pasar la función $scope.on a la variable vm? ¿Podrían ayudarme a comprender como funciona this vs $scope?

3
  • Lo que me sigo preguntando es para qué quieres usar this si sabes que es $scope lo que funciona :P. Aunque $scope imita la estructura árbol DOM, no es lo mismo ya que $scope es también un acceso a la API y una especie de clausura para las evaluaciones en tu controlador. (Por cierto, nunca debes cambiar el DOM directamente en javascript. Evita this). Commented el 30 may. 2016 a las 8:21
  • Quiero entender. Porque logré que funcionara simplemente usando prueba y error. Es decir, además de hacer que el código funcione, me gustaría entender por qué funciona. Hay dos respuestas posibles: si o no, pero ambas tendrían que justificarse de forma objetiva de modo que habría una sola respuesta correcta.
    – toledano
    Commented el 30 may. 2016 a las 14:36
  • @ChemaCortes "Evita this". Decir esto es un gran error. Usar this es una muy buena idea a veces. El equipo de angular está compuesto por muy buenos programadores y dudo que hayan gastado su tiempo desarrollando un feature inútil e innecesario, no crees? Lee mi respuesta para que entiendas porque.
    – devconcept
    Commented el 30 may. 2016 a las 16:20

2 respuestas 2

17

Respondiendo directamente a tu pregunta

¿Existe alguna manera de pasar la función $scope.on a la variable vm?

No. Son cosas diferentes. La función $on es una propiedad de los scopes usada para emitir eventos, no tiene nada que ver con el valor de this en un controller.

Me explico.

La razón de tu confusión es porque piensas que $scope y this tienen algun tipo de relación directa y esto no es así, en realidad this es sólo una propiedad más del $scope asociado a tu controller (igual que lo son $on y $emit).

thisvsscope

Repasando:

Cada vez que creas un controller, un nuevo $scope se crea internamente usando el método $scopepadre.new(), esto ocurre porque ng-controller es una directiva que es creada con la con la siguiente configuración

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

La parte que dice scope: true es la que se encarga de informarle al servicio $compile que se debe crear un nuevo $scope.

Puedes pensar en el scope y sus propiedades como los datos que son usados para renderizar la vista. El scope es la única fuente de la verdad para todo lo relacionado con la vista.

¿Cómo entra this en todo esto?

Tus controllers siempre son creados como una especie de clase (es por esto que se debe por convención nombrarlos en mayúsculas), de esta forma

new MyCtrl();

Si lees como funciona el operador new en javascript y cual el su impacto en el valor de this (verifica el paso 2) te darás cuenta que cuando creas un objeto de esta forma cualquier propiedad que le agregues al this se lo estás agregando a la "instancia de la clase" como tal. Esto es puramente una comparación ya que en javascript no hay clases pero creo que ilustra bastante bien el punto.

¿Que tiene que ver todo lo anterior con this en angular?

Pues que cuando usas la opción controllerAs de esta forma 'MyController as foo' lo único que haces es indicarle al angular que cree una nueva propiedad llamada 'foo' en el $scope asociado al elemento y que le asigne a esa propiedad la instancia del controller recién creado.

Esto último es importante entenderlo bien, los scopes no son una característica de los controllers, los scopes están asociados a elementos del DOM, el ejemplo más notable de esto es la directiva ng-repeat que crea un nuevo $scope por cada elemento de una colección.

Vamos a comparar la notación tradicional con la notación controllerAs para que veas cuales son las diferencias

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>

En este ejemplo en ambos controllers una propiedad llamada vm es creada con un objeto vacío y a este se le agregan propiedades que son bindeadas en la vista. En el modo tradicional hay que hacer todos estos pasos manualmente mientras que en el controllerAs esto no es necesario ya que cuando se instancian objetos en javascript un nuevo objeto vacío es creado (paso 1). La propiedad en el $scope es creada en la misma declaración de la directiva ng-controller="SampleCtrl as vm"

¿Y esto para que sirve?

Pues que debido a que angular es javascript es necesario algunas veces usar un . (o lo que se conoce como "dot notation") para referenciar algunos objetos ya que en javascript estas referencias pueden perderse debido a como funciona la herencia prototípica en angular(y en javascript de modo general). De esta forma nos aseguramos que estamos haciendo referencia al objeto correcto.

En el siguiente ejemplo no estas usando "dot notation" por lo que cuando editas la propiedad en el controller hijo funciona como esperas pero cuando tratas de hacerlo en su padre no hace nada.

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>

Esta sería la forma correcta de hacerlo

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>

Resumiendo controllerAs nos asegura que no caigamos en trampas como esa sólo hay que entender como funciona. El $scope sigue teniendo las mismas responsabilidades de siempre(hacer $watch, $emit, $broadcast, etc) y el this no pretende en ninguna forma reemplazar su funcionalidad. Simplemente nos garantiza buenas prácticas y a veces nos evita tener que inyectar $scope si no es necesario.

Aquí te dejo algunos artículos(en inglés desafortunadamente) en el que puedes encontrar mas detalles del tema en cuestión

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

2
  • Muchas gracias por tu amplia respuesta, @devconcept. Pongo aquí dos enlaces que contribuyen al tema: johnpapa.net/… y johnpapa.net/angularjss-controller-as-and-the-vm-variable
    – toledano
    Commented el 30 may. 2016 a las 18:16
  • 1
    @toledano Je, no conocía esos artículos. Yo casi siempre termino escribiendo una línea como la siguiente var vm = $scope.vm = {}; cuando no estoy usando controllerAs pero ten en cuenta que lo anterior no es un reemplazo 100% equivalente por lo que usar controllerAs es la estrategia recomendada en todos esos casos.
    – devconcept
    Commented el 30 may. 2016 a las 18:54
4

deberias de hacer algo como esto:

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

te recomiendo tambien leer algo sobre ES6 ya que puedes generar clases objetos y metodos con angular la programacion se te hara mas facil

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.