Special chars in angular variable located in HTML file

Question

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.

Answer 1

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);
}