Data binding with `ng-model` not working on some systems

Question

Quite strange, but yes the same code works on one system but not on the other.

I developed a HTML-5 based extension for Adobe Creative Cloud Applications (Adobe CC have the chromium framework built in that supports HTML based extensions) in which I used the angularJS framework.

I tested it on many systems at my end and it is working perfectly fine. But when I sent the same application to my friends. For some of them— the view is loaded fine, the button clicks were working fine too but the input text was not binded properly! I keep on getting the blank text from it- I used ng-model for by <input> boxes.

Here's my code-

View-

<div>   
   <input type='text' placeholder='Email' ng-model='user.email' />
   <input type='password' placeholder='Password' ng-model='user.password' />
   <button ng-click='login()'>Login</button>
</div>  

Controller-

$scope.user={};
$scope.login=function(){
   if($scope.user.email!="" && $scope.user.password!=""){
       ...
       ...
   }
   else{
      alert("Don't leave the fields blank!");
   }
};

Result-

Getting the alert on some systems!

I have other views with the similar form-like structure and getting the same issue there also!

I can access the developer console, so I asked the users getting this issue to send me the console's content; but everything looked fine there. There were no errors showing on the console! Can I log something useful there that can help me finding the issue?

Since I'm not able to replicate this at my end, I'm getting no hint how to solve this thing. I'm not able to think what could be the possible reason(s) for this behaviour. This is weird!

Answer 1

I had a samiliar problem, where my javascript did not pick up the value of my ng-model variable.

Eg. When I click the button, the alert value comes up blank:

Html:

<input type="text" ng-model="$scope.username"> {{$scope.username}}
<buton ng-click="alertUsername()">Click here</button>

Javascript:

$scope.username="";
$scope.alertUsername = function() {
  alert($scope.username);
}

When I changed my html to the following, it alerted my value:

<input type="text" ng-model="username"> {{username}}
<buton ng-click="alertUsername()">Click here</button>

it seems all I had to do was not use the $scope prefix in my html.

Answer 2

I thinks that your code is correct but ng-model create user object if one input had been set.

So, if you let all input form blank, your user object will be "undefined"

So, you have to check before if user object is not undefined.

if (user === undefined) alert("email and password are empty");

If one form input are set with some value, the user object is create with field of input form.

There is a correct code:

if (user === undefined) alert("email and password are empty");
else {
    console.log(user);
    if (user.login === undefined) alert("login is empty");
    else if (user.password === undefined) alert("password is empty");
    else alert("amazing, thanks");
}