CODEWITHSUNDEEP
javascripthtmlangularjsencoding
Ellone
Ellone

Reputation: 3898

Special chars in angular variable located in HTML file

At a point in my html I'm doing things like this :

<li ng-repeat="favorite in favorites track by $index">
  <a ng-href="javascript:void(0)" ng-click="changeSVG(favorite)">
    <i class="fa fa-sitemap"></i>{{favorite}}
  </a>
</li>

The problem is that sometimes the favorite in ng-click="changeSVG(favorite)" contains special characters like '. So I'm getting errors like this in console :

Error: [$parse:lexerr] http://errors.angularjs.org/1.3.14/$parse/lexerr?p0=Unterminated%20quote&p1=s%2042-44%20%5B')%5D&p2=changeSVG('Process%20passageNaN'ordre%20MOB') at Error (native)

How can I prevent this ?

I heard about $sce when looking into it but not sure if it fits my needs and how to use it in my controller.

Here is the changeSVG() function :

$scope.changeSVG = function (svgName) {
    var defaultZoom = getZoomFromCarto(svgName);

    $scope.currentCartography = svgName;
    $scope.currentZoom = defaultZoom;
    if ($scope.cartoHistory.indexOf(svgName) != -1)
        $scope.cartoHistory.splice($scope.cartoHistory.indexOf(svgName), 1);
    $scope.cartoHistory.unshift(svgName)
    if ($scope.cartoHistory.length > 20)
        $scope.cartoHistory = $scope.cartoHistory.slice(0, 20);

    localStorage.setItem("cartoHistory", JSON.stringify($scope.cartoHistory));
    removeEmbed();
    var svgPath = "SVG/" + $scope.currentLanguage + "/" + svgName + ".svg";
    lastEmbed = createNewEmbed(svgPath, defaultZoom);
}

I tried to display the svgPath in the log, it works fine with normal files, but when I try with my file with (space) and ' in its name, nothing is displayed.

Upvotes: 9

Views: 1227

Answers (1)

Alvaro Pinot
Alvaro Pinot

Reputation: 271

The problem occurs as Angular replaces that favorite at your function call by a string. A solution could be use $index as the function parameter, so you can read from the array favorites at your controller code adding any validation you may need. And no angular string replacement magic shall occur.

something like:

Template:

<li ng-repeat="favorite in favorites track by $index">
  <a ng-href="javascript:void(0)" ng-click="changeSVG($index)">
    <i class="fa fa-sitemap"></i>{{favorite}}
  </a>
</li>

Controller:

$scope.changeSVG = function (index) {
    // Add any validation logic here.
    var svgName = favorites[index];

    var defaultZoom = getZoomFromCarto(svgName);

    $scope.currentCartography = svgName;
    $scope.currentZoom = defaultZoom;
    if ($scope.cartoHistory.indexOf(svgName) != -1)
        $scope.cartoHistory.splice($scope.cartoHistory.indexOf(svgName), 1);
    $scope.cartoHistory.unshift(svgName)
    if ($scope.cartoHistory.length > 20)
        $scope.cartoHistory = $scope.cartoHistory.slice(0, 20);

    localStorage.setItem("cartoHistory", JSON.stringify($scope.cartoHistory));
    removeEmbed();
    var svgPath = "SVG/" + $scope.currentLanguage + "/" + svgName + ".svg";
    lastEmbed = createNewEmbed(svgPath, defaultZoom);
}

Upvotes: 1

Related Questions