Estoy tratando de aprender angularjs, 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
?
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. Evitathis
).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.