13

Probando AngularJS me encontré con una situación que me gustaría saber porqué ocurre.

Fíjense en el objeto $scope.film que está definido en el controlador que se ve acá abajo:

/* Modelo */
let app = angular.module('myApp', []);

/* Controlador */ 
app.controller('mainCtrl', ['$scope', function($scope){
  /* Film */ 
  $scope.film = {
    titulo: 'Mad Max Fury Road',
    año: 2015
  };
}]);

Tal cual como está, es un objeto con una propiedad titulo y una propiedad año. En el caso de la propiedad año, está definida con la letra ñ.

$scope.film = {
    titulo: 'Mad Max Fury Road',
    año: 2015
};

Si yo quiero usar una expresión en una vista para imprimir el valor de la propiedad año del objeto, usando la sintaxis objeto.propiedad...

<!-- Vista -->
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <p>{{film.año}}</p>
    </div>
</div>

...obtengo un error:

Lexer Error: Unexpected next character at columns 6-6 [ñ] in expression [film.año].

Dándome a entender, de acuerdo a la documentación de referencia de errores de AngularJS, que el caracter ñ me genera un error léxico en la expresión:

Occurs when an expression has a lexical error, for example a malformed number (0.5e-) or an invalid unicode escape.

Si por otro lado, uso la misma expresión para imprimir el valor de la propiedad año usando la sintaxis objeto['propiedad'], no genera ningún problema, y en la vista se me muestra el valor de esa propiedad.

<!-- Vista -->
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <p>{{film['año']}}</p> <!-- HTML: 2015 --> 
    </div>
</div>

Snippet de prueba

Aquí lo pueden probar. Dejé comentada la expresión que no da errores.

/* Modelo */
let app = angular.module('myApp', []);

/* Controlador */ 
app.controller('mainCtrl', ['$scope', function($scope){
  $scope.film = {
    title: 'Mad Max Fury Road',
    año: 2015
  };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

<!-- Vista -->
<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <p>{{film.año}}</p>
    
    <!-- <p>{{film['año']}}</p> -->
  </div>
</div>

Yo podría perfectamente usar la sintaxis objeto['propiedad'] para imprimir mi valor de la propiedad, o cambiar el nombre de la propiedad de año a annio (u otros).

Pero el punto de mi pregunta es saber el porqué AngularJS no permite el uso de la letra ñ como parte del nombre de una propiedad, usando la sintaxis objeto.propiedad dentro de una expresión.

1

2 respuestas 2

17
+200

Encontré la respuesta de porqué ocurría esta situación.

El caracter ñ no es parte del rango de caracteres por defecto que se pueden usar para las propiedades de los objetos en AngularJS, y por eso no lo puedo usar con la sintaxis objeto.propiedad.

Ese rango de caracteres está disponible en una función en el script angular.js, que dependiendo de las versiones de AngularJS con que se esté trabajando, puede tener un nombre distinto.

Por ejemplo, en AngularJS 1.4.8, esa función se llama isIdent(), mientras que en AngularJS 1.7.8, esa función se llama isValidIdentifierStart() (script no minificado, línea 15701):

isValidIdentifierStart: function(ch) {
    return ('a' <= ch && ch <= 'z' ||
        'A' <= ch && ch <= 'Z' ||
        '_' === ch || ch === '$');
},

Si por alguna razón hipotética, necesito trabajar con el caracter ñ usando la sintaxis objeto.propiedad, lo que tendría que hacer es modificar el script angular.js, agregando ese caracter a dicha función.

En el código que se ve abajo también agrego la misma letra pero en mayúscula:

/* Agrego ñ (minúscula) y Ñ (mayúscula) */
isValidIdentifierStart: function(ch) {
    return ('a' <= ch && ch <= 'z' ||
        'A' <= ch && ch <= 'Z' ||
        '_' === ch || ch === '$' || ch === 'ñ' || ch === 'Ñ');
},

Si así lo quisiera, podría definir un rango adicional de caracteres al ya existente, de modo que no solo puedo usar la ñ, sino otros caracteres con tilde o diéresis.

Supongamos que necesito usar todos los caracteres desde À hasta ÿ. Para ello necesito los números decimales correspondientes a dichos caracteres (aquí hay una tabla extendida de codigos ASCII como referencia) y el método charCodeAt(). Los dos me van a permitir definir los mínimos y los máximos de dichos rangos:

/* Agrego rango de caracteres desde À (192) hasta ÿ (255), 
   incluyendo ñ (241) y Ñ (209) */
isValidIdentifierStart: function(ch) {
    return ('a' <= ch && ch <= 'z' ||
        'A' <= ch && ch <= 'Z' ||
        '_' === ch || ch === '$') 
        || 192 <= ch.charCodeAt(0) && ch.charCodeAt(0) <= 255;
},

De esa manera, si quisiera, podría usar el carácter à (que está dentro del rango) y usarlo con mis propiedades de objetos.

/* Controlador */
app.controller('mainCtrl', ['$scope', function($scope){
    /* Propiedad 'año' escrita con el caracter adicional à (224) */ 
    $scope.film = {
        titulo: 'Mad Max: Fury Road',
        àño: 2015
    };
}]);

Podría incluso ir mas allá y nombrar mi propiedad de año en mi objeto, solamente con los caracteres adicionales que definí, y seguiría funcionando.

Módulo + Controlador

/* Módulo */
let app = angular.module('myApp', []);

/* Controlador */ 
app.controller('mainCtrl', ['$scope', function($scope){
    /* La propiedad 'año' del objeto está escrita solamente 
       con los caracteres adicionales à (224), ñ (241) y ö (246) */
    $scope.film = {
        titulo: 'Mad Max: Fury Road',
        àñö: 2015
    };
}]);

Vista

<!-- Vista -->
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <p>{{film.àñö}}</p>
    </div>
</div>

Por supuesto, si así lo necesito, en todos los casos puedo usar la sintaxis objeto['propiedad'].

Notas adicionales:

2
  • 1
    mas alla de la buena respuesta,se acostumbra a declarar variables sin caracteres especiales Commented el 27 ago. 2019 a las 18:33
  • 2
    @JackNavaRow Si, es cierto, pero el punto de todo esto era ver que pasa si es que necesito usar esos caracteres especiales con la sintaxis objeto.propiedad. Es una situación límite que quería probar. Commented el 27 ago. 2019 a las 19:34
7

A partir de AngularJS v1.5.4 se agregó el módulo ngParseExt el cual:

Proporciona funcionalidad para permitir caracteres Unicode en identificadores dentro de expresiones Angular.

Este módulo permite el uso de cualquier identificador que siga la convención de nomenclatura de identificadores ES6 para ser utilizado como un identificador en una expresión Angular. ES6 delega algunas de las definiciones de reglas de identificación a Unicode, este módulo utiliza la convención de identificadores ES6 y Unicode 8.0.

Ejemplo:

/* Modelo */
let app = angular.module('myApp', ['ngParseExt']);

/* Controlador */ 
app.controller('mainCtrl', ['$scope', function($scope){
  $scope.film = {
    title: 'Mad Max Fury Road',
    àñö: 2015
  };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular-parse-ext.js"></script>

<!-- Vista -->
<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <p>{{film.àñö}}</p>
  </div>
</div>

2
  • 2
    La idea que me gatilló proponer la situación que señalé al inicio, me vino de una aplicación web en AngularJS con la que estoy trabajando. Lamentablemente no la voy a poder probar en ella porque esto viene desde AngularJS 1.5.4, mientras que la aplicación con la que estoy trabajando usa AngularJS 1.4.8. Sea cual sea el caso, no se me había pasado por la cabeza que había un módulo para eso. Commented el 28 ago. 2019 a las 3:30
  • 3
    No hay drama, porque de todos modos la pregunta, tal cual como está planteada, no tiene énfasis en alguna versión en particular. Commented el 28 ago. 2019 a las 13:05

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.