AngularJs 1.3 $resource is ignoring some characters

Question

I'm working in the maintenance of a project that uses a old version of AngularJs. I did not work on it from the start, so I can't change it much.

The problem is: when I use the $resource to access a PHP script, it is ignoring some characters (like "#" or "\"), so I'm thinking that is some urlenconding problem (not sure about it). See the codes below.

reports/report.html

<table class="table table-condensed table-bordered table-hover">
        <thead>
            <tr>
                <th>Code</th>
                <th>Date</th>
                <th>Company</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
        <tr data-ng-repeat="info in searchResult as results">
            <td>{{info.code}}</td>
            <td>{{info.date}}</td>
            <td>{{info.company_name}}</td>
            <td class="col-sm-2">
            <button data-ng-click="cancel(info.code,info.password)" data-ng-show="!info.canceled" class="form-control btn-danger">Cancel</button>
            </td>
        </tr>
</tbody>

reports/controllers.js

define(['reports/module'], function (app) {
'use strict';

    app.controller('reports', function ($scope, $http, $timeout, cancelService,loading, modal) {
        $scope.cancel = function(code, password) {
            $scope.confirm.code = code;
            $scope.confirm.password = password;
            cancelService.query($scope.confirm, function(return) {
                if(return.status) {
                    alert(return.msg);
                    $scope.searchResult = [];
                }
            });
        };
    });
});

reports/services.js

define(['reports/module', 'ngResource'], function (app) {
    'use strict';

    app.factory('cancelService', function($resource){
        return $resource('api/reports/cancel-online/reservationno/:code/password/:password',{},{'query' : {'isArray': false}});
    });
});

PHP script (api/reports/ReportsAPI.class.php)

class ReportsAPI extends Controller {

    //This is a internal method that expects a GET Request using a defined URL
    $restfull = new Restful();
    $restfull->server('GET','api/reports/cancel-online/reservationno/:code/password/:password', function($code, $pass) {
        //do stuff
        //I'm facing the problem here
    }

}

When I'm using the password "123#123" for example and debug my PHP, the var $pass have the value "123" and breaks my code. Doing a console.log($scope.confirm.password) just before call the service, I'm getting the correct result, so looks like a problem with the URLenconding.

I tried some other approaches that I found in SO (1,2) without success and I also found this issue in GitHub suggesting a change in a angular file, but I did not try it, because I don't know which other peaces of software it will affect

How can I solve this?

Note: The "password" is just problematic var name, and is not a real password, so no problem in keep it open in javascript or send it through GET.

Follow are the versions:

AngularJS v1.3.0
PHP 5.6
Tested both in Firefox and Chrome

I would recommend you to not pass password in url and instead use post method. You could use `encodeURIComponent()` to encode password i.e. `$scope.confirm.password = encodeURIComponent(password);` — Satpal, Apr 20 '16 at 13:16
Simple and works like a charm. Thank you very much. Post it as a answer and I'll accept it. — James, Apr 20 '16 at 13:29

score 1 · Accepted Answer · answered Apr 20 '16 at 13:30

You need to encode the special character in the variable password, which can be achieved using encodeURIComponent()

The encodeURIComponent() method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

$scope.confirm.password = encodeURIComponent(password);

AngularJs 1.3 $resource is ignoring some characters

1 Answers1