旧代码

Question

我编写了一个AngularJS应用程序，其中输入框中值的更改被动态更新到URI中，该URI由正斜杠拆分，作为在最终可以共享的URI中存储数据的方法。本质上，URL是数据库。当有人访问URI时，URI字符串中的值将重新插入应用程序的范围。示例设置页面：

http://whohe.co.uk/Quiz_Scorer_App.html#/!/TQS//////////////////////////////////

将Input框中的值放入URI时，我使用以下函数：

    $scope.go = function (term,pos) { /* Fires on Keyup, pushes term into the path */
        // var res = term.replace(/\//g, "%2F"); Fix to allow slash in fields
        $location.path(update(decodeURI($location.url()),pos,term), false);
    };


function update(line,index,term) {
    var arr = line.split("/");
    arr.splice(index,1,term);
    var res = arr.join("/");
    return res;
}

当从URL获取值到范围时，我使用decodeURI例如：

$scope.TeamAN = decodeURI(arr[14]);

我的问题是正斜杠。例如如果我输入N / A，这会导致一个主要问题，因为输入会进入下一个字段。

理想情况下，我会用％2F替换所有正斜杠，但是当我这样做时使用：

term.replace(/\//g, "%2F")

以下内容更新为URI：

N％252FA - 正在进行双重编码。

当刷新页面时，返回：

N％2FA

而不是我期待的N / A.

希望很清楚。非常感谢协助解决这个问题。

此致

Answer 1

根据讨论，首先将/更改为%2F：

$scope.go = function (term,pos) { /* Fires on Keyup, pushes term into the path */
    var res = term.replace(/\//g, "%2F"); Fix to allow slash in fields
    $location.path(update(decodeURI($location.url()),pos,res), false);
};

然后，当您阅读URI时，需要解码%2F：

旧代码

    // Fill the boxes with any values found in the URL
    var url = $location.url();
    var arr = url.split("/");
    $scope.LeagueDivision = decodeURI(arr[3]);
    $scope.Venue = decodeURI(arr[4]);
    $scope.Competition = decodeURI(arr[5]);
    $scope.PhaseMatch = decodeURI(arr[6]);
    $scope.Questioner = decodeURI(arr[7]);
    $scope.Scorer = decodeURI(arr[8]);
    $scope.TeamAN = decodeURI(arr[9]);
    $scope.TeamBN = decodeURI(arr[10]);
    $scope.Player = [];
    for (var i = 0; i < 8; i++) { $scope.Player[i] = decodeURI(arr[i+11]); }
    $scope.TeamAS = parseInt(0+decodeURI(arr[19]));
    $scope.TeamBS = parseInt(0+decodeURI(arr[20]));
    $scope.Start = [];
    for (var i = 0; i < 8; i++) { $scope.Start[i] = decodeURI(arr[i+21]); }
    $scope.First = parseInt(0+decodeURI(arr[29]));
    $scope.StartDateTime = decodeURI(arr[30]);
    $scope.TeamAC = parseInt(0+decodeURI(arr[31]));
    $scope.TeamBC = parseInt(0+decodeURI(arr[32]));
    if($scope.StartDateTime==''){
            d = new Date();
            var date = d.YYYYMMDDhhmmssmmm();
            $scope.StartDateTime = date.substring(0, date.length - 7);
            $location.path(update(decodeURI($location.url()),30,$scope.StartDateTime), false);
    }
    $scope.go = function (term,pos) { /* Fires on Keyup, pushes term into the path */
            term = term.replace(/\//g, "%2F"); // Fix to allow slash in fields
            var i = update(decodeURI($location.url()),pos,term);
            $location.path(i, false);
    };
    $scope.start = function () {
            $location.path(update(decodeURI($location.url()),2,'TQM'), true);
            if(!$scope.$$phase) { $scope.$apply(); }
    };

新代码

    // Fill the boxes with any values found in the URL
    var url = $location.url();
    var arr = url.split("/");
    arr = arr.map(function(comp){return decodeURI(comp).replace(/%2F/g,"/")});
    $scope.LeagueDivision = arr[3];
    $scope.Venue = arr[4];
    $scope.Competition = arr[5];
    $scope.PhaseMatch = arr[6];
    $scope.Questioner = arr[7];
    $scope.Scorer = arr[8];
    $scope.TeamAN = arr[9];
    $scope.TeamBN = arr[10];
    $scope.Player = [];
    for (var i = 0; i < 8; i++) { $scope.Player[i] = arr[i+11]; }
    $scope.TeamAS = parseInt(0+arr[19]);
    $scope.TeamBS = parseInt(0+arr[20]);
    $scope.Start = [];
    for (var i = 0; i < 8; i++) { $scope.Start[i] = arr[i+21]; }
    $scope.First = parseInt(0+arr[29]);
    $scope.StartDateTime = arr[30];
    $scope.TeamAC = parseInt(0+arr[31]);
    $scope.TeamBC = parseInt(0+arr[32]);
    if($scope.StartDateTime==''){
            d = new Date();
            var date = d.YYYYMMDDhhmmssmmm();
            $scope.StartDateTime = date.substring(0, date.length - 7);
            $location.path(update(decodeURI($location.url()),30,$scope.StartDateTime), false);
    }
    $scope.go = function (term,pos) { /* Fires on Keyup, pushes term into the path */
            term = term.replace(/\//g, "%2F"); // Fix to allow slash in fields
            var i = update(decodeURI($location.url()),pos,term);
            $location.path(i, false);
    };
    $scope.start = function () {
            $location.path(update(decodeURI($location.url()),2,'TQM'), true);
            if(!$scope.$$phase) { $scope.$apply(); }
    };

正斜杠替换为：AngularJS中的％252F

1 个答案:

旧代码

新代码