current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

So I'm creating a webpage using the MEAN stack and I saved the user variable to be carried across every page using the HTML5/Javascript variable of sessionStorage.

We are now trying to pass this value to angularJS through the controller. The issue is, however, we don't know how to pass it into the submit file without having the user type in the value. We tried doing to display the username as readonly and setting the value using getElementByID, but angularJS doesn't recognize the new value, but rather gets the value from the old field, which is "" because the value of the text field is blank to start with, so the user is undefined in the angularJS scope.

We also tried to pass the value as a hidden scope, which also did not work, because angular

Is there a way of just declaring the variable in the ng-model? The issue is that any ng value uses "" so it's always thinking that the value is just "user" is just the text "user" and not actually a variable. .

Any help would be appreciated

share|improve this question
    
Hey man please post your code. – Rafael Nov 30 '14 at 21:04
    
@DavidMa please edit the Q adding necessary code snippet. – rnrneverdies Nov 30 '14 at 21:22

3 Answers 3

up vote 1 down vote accepted

If you have saved your username into sessionStorage like this:

window.sessionStorage.setItem("username","toby");

Then in a controller in angular you can:

$scope.username = window.sessionStorage.getItem("username"); (Edit: this will not bind username to the session storage)

Note: If you want to store JSON in session/local storage you should make it JSON beforehand:

window.sessionStorage.setItem("userObject", JSON.stringify(userObject));

And to retrieve:

var userObject = JSON.parse(window.sessionStorage.getItem("userObject"));

If you want to watch session storage you can use $watch:

$scope.$watch(
    function(){return window.sessionStorage.getItem("username");},
    function(newVal, oldVal){
        console.log("Username changed from", oldVal, "to", newVal);
    }
);
share|improve this answer
    
We are dumbfounded on how simple the solution was. Thanks. Did not realize that the controller can access the window file. – David Ma Nov 30 '14 at 21:39
    
Yeah, angular seems like it overcomplicates things at times, but in the end, it is just javascript and you can do javascript things with it! Best of luck – Toby L Welch-Richards Nov 30 '14 at 21:45
up vote 0 down vote

You might need to the angularJS $apply() function in order to get angular to respond to an updated value. Check out this useful article on $apply(). You need to call $apply() when you are making a change to the model that Angular isn't aware of (outside of an $http call, for example, for which Angular will automatically make an $apply() call). You should wrap your function inside the $apply() call, i.e.

$scope.$apply(function(var) {
    etc.
}

Additionally, to place a value in a controller into the model, assuming you are using a MVC framework, you need to have a model variable declared inside the controller. For example, you might have a controller that begins:

.controller("exampleCtrl", function($scope) {
    $scope.model = model;
}

Then, you can create/update a value in the model by calling

$scope.model.VALUENAME = whatever value

Hopefully this helps!

share|improve this answer
    
If you post your code I could give a more clear answer – eugene1832 Nov 30 '14 at 21:05
    
Hi, thanks for your help. Here's our code: pastebin.com/ZQyybYUB (view side) pastebin.com/1ymgP2Ca (controller side) We got rid of the user receiver on the controller side because we couldn't figure out how to use it yesterday. Sorry I don't know how to copy paste code on here :/ – David Ma Nov 30 '14 at 21:21
up vote 0 down vote

this worked for me:

// in the javascript only section call an angular method to update the data when OnClick, OnChange, etc....

angular.element(document.getElementById('YourElementId')).scope().update_your_value();

and 

//inside the angular controller

$scope.update_your_value =  function(){
    $scope.your_model.value        = $('#YourElementId').val(); //  or document.getElementById('YourElementId')).value
    $scope.$apply();
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.