角度变量中的特殊字符位于HTML文件中

Question

在我的HTML中,我正在做这样的事情:

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

问题是有时候favoritein ng-click="changeSVG(favorite)"包含特殊字符'.所以我在控制台中遇到这样的错误:

错误:[$ parse:lexerr] http://errors.angularjs.org/1.3.14/ $ parse/lexerr？p0 =未终止%20quote&p1 = s%2042-44%20%5B')%5D&p2 = changeSVG('错误(本机)处理%20passageNaN'ordre%20MOB')

我怎么能阻止这个？

我在调查时听说过$ sce,但不确定它是否符合我的需求以及如何在我的控制器中使用它.

这是changeSVG()功能:

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

我试图在日志中显示svgPath,它可以正常使用普通文件,但是当我尝试使用 (space) and ',没有显示任何内容.

Answer 1

favorite当 Angular 将函数调用中的字符串替换为字符串时，就会出现问题。解决方案可以用作函数参数，因此您可以在控制器代码中$index读取数组，添加您可能需要的任何验证。favorites并且不会发生角弦替换魔法。

就像是：

模板：

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

控制器：

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