angularjs gives 'undefined' for hidden field with php session variable as value

Question

I have found a lot or resources on how to pass a hidden input field value to an angularjs script, but not if that value is being read from a php session.

This is my html code:

    <div ng-controller="ImgCtrl">
      <input type="hidden" ng-model="uid" value="<?=$_SESSION["uid"];?>" >
      <input type="file" ng-file-select="onFileSelect($files)" >
      <br/>
      <span>{{ message }}</span>
    </div>

I have also tried it as this:

    <input type="hidden" ng-model="uid" value="{{<?=$_SESSION["uid"];?>}}" >

EDIT The angularjs code that will handle it is:

var ImgCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        url: 'image_upload.php', 
        method: 'POST',
        data: {
            'uid': $scope.uid
        },
        file: file
      }).success(function(data, status, headers, config) {
        $scope.message = data;
      }).error(function(data, status) {
         alert(data);
      });
    }
  };
}];

Which was one of the answers I found, but I can not seem to find how to read a php session variable in angularjs.

Anyone have an idea?

Thanks!

Are you trying to pass the value to a controller or a directive? (In other words, what are you doing with the value?) — drew_w, Jan 14 '14 at 00:34
I added the angular code that has to handle the hidden value... — Iris_vdz, Jan 14 '14 at 00:37

score 3 · Accepted Answer · edited May 23 '17 at 12:31

The first and easiest way to do what you are looking for is to basically create a global javascript variable and set the value in your PHP code. This will then get passed on to the controller. In the php page you would have:

<script>var serverVariable=<?=$_SESSION["uid"];?>;</script>

And in your controller you would have the line that says:

$scope.userId = serverVariable;

After that you can use the userId from scope wherever you would like and it will work! There is a plunker demonstrating this here: http://plnkr.co/edit/7xEGM0Rz80TJQc0kPBwz?p=preview.

Notes

So, of course the easiest thing to do isn't always the best thing to do. First, if you are passing user id around client side - whether its in a hidden variable or if its in a javascript global the client can manipulate your value. You don't want to rely on whatever comes back from the client in your "post" or "put" then - but rather you should use the value that you have stored in session. This is a really good rule of thumb across the board for any sensitive values.

Another thing - this is the easiest but it is far from the only option. You might consider using the "ng-init" directive on the element where your controller is defined. You can find a stack question with that answer here: Can you pass parameters to an AngularJS controller on creation?. Again, simply pass the values in on the server side into your init routine and everything should get passed to the controller correctly!

I hope that my answer at least has set you on the right track. Good luck!

I was thinking something about global variables and then I forgot completely about it, thanks works like a charm! — Iris_vdz, Jan 14 '14 at 00:57

borracciaBlu · Answer 2 · 2016-01-08T07:12:47.680

angular.element

You could use angular.element to get an html element and with val you can read the value from the element without binding.

In your case it would be:

<input type="hidden" id="uid" value="<?=$_SESSION["uid"];?>" >

angular.element("#uid").val();

ng-init

With ng-init you can just init the model you want with the value you want.

In your case it would be :

<div ng-controller="ImgCtrl" ng-init="uid = <?=$_SESSION["uid"];?>" >

angularjs gives 'undefined' for hidden field with php session variable as value

2 Answers2

angular.element

ng-init