Passing a javascript variable into a angularJS scope

Question

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

Answer 1

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

Answer 2

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!

Answer 3

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