Home / Questions / 287552
Accepted
cristiancajiaos
Asked: 2020-08-23 10:58:33 +0800 CST 2020-08-23 10:58:33 +0800 CST

Presence of the letter 'ñ' in a property name inside an expression in AngularJS

  • 772

Testing AngularJS I found a situation that I would like to know why it happens.

Take a look at the object $scope.filmthat is defined in the controller below:

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

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

As is, it is an object with a property tituloand a property año. In the case of the property año, it is defined with the letter ñ .

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

If I want to use an expression in a view to print the value of the añoobject's property, using the syntax objeto.propiedad...

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

...I get an error:

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

Giving me to understand, according to the AngularJS error reference documentation, that the ñ character generates a lexical error in the expression:

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

If, on the other hand, I use the same expression to print the value of the property añousing the syntax objeto['propiedad'], it doesn't cause any problems, and the value of that property is shown to me in the view.

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

test snippet

Here you can try it. I commented out the expression that does not give errors.

/* 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>

I could just as well use the syntax objeto['propiedad']to print my property value, or change the property name from añoto annio(or others).

But the point of my question is to know why AngularJS does not allow the use of the letter ñ as part of a property name, using the syntax objeto.propiedadinside an expression.

javascript

2 Answers

  1. Best Answer

    I found the answer why this situation occurred.

    The ñ character is not part of the range of default characters that can be used for object properties in AngularJS, and so I can't use it with the syntax objeto.propiedad.

    That range of characters is available in a function in the script angular.js, which depending on the versions of AngularJS you are working with, may have a different name.

    For example, in AngularJS 1.4.8 , that function is called isIdent(), while in AngularJS 1.7.8 , that function is called isValidIdentifierStart()(non-minified script, line 15701): 

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

    If for some hypothetical reason, I need to work with the ñ character using the syntax objeto.propiedad, what I would have to do is modify the script angular.js, adding that character to said function.

    In the code below I also add the same letter but in uppercase:

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

    If I wanted to, I could define an additional range of characters to the existing one, so that I can not only use the ñ, but other characters with tildes or umlauts.

    Suppose I need to use all the characters from À to ÿ . For this I need the decimal numbers corresponding to these characters ( here is an extended table of ASCII codes for reference ) and the method charCodeAt(). Both will allow me to define the minimum and maximum of these ranges:

    /* 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;
},

    That way, if I wanted to, I could use the à character (which is in range) and use it with my object properties.

    /* 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
    };
}]);

    I could even go further and name my property añoin my object, just with the extra characters I defined, and it would still work.

    Module + Controller 

    /* 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
    };
}]);

    View

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

    Of course, if I need to, in all cases I can use the objeto['propiedad'].

    Additional notes:

    • 17

  2. From AngularJS v1.5.4the module was added ngParseExtwhich:

    Provides functionality to allow characters Unicodein identifiers within Angular expressions.

    This module allows the use of any identifier that follows the identifier naming convention ES6to be used as an identifier in an Angular expression. ES6delegates some of the identification rule definitions to , this module uses the and Unicodeidentifier convention .ES6Unicode 8.0

    Example:

    /* 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>

    • 7