controller function sees old version of the variable

Question

I'm trying to hook a few variables up to a function in AngularJS and while they appear to be making it to the front end, the changes made on the front end don't transfer to the back end.

Here's the relevant portion of the body:

<body ng-controller="main-controller">
  <div ng-show="show_login" ng-include="'/racket-web/view/login.html'">   
</body>

And what it includes

<table>
  <tr>
    Email <input ng-model="login_email"/> {{login_email}} <br>
    Pass <input type="password" ng-model="login_password"/> {{login_password}}<br>
    <button ng-click="exec_login()">Login</button>
  </tr>
</table>

Here's my controller

app.controller('main-controller', function($scope) {

    $scope.login_email = 'abcd';
    $scope.login_password = 'defg';


    $scope.changeView = function(view) {
        $scope['show_login'] = false;
        // other views snipped        
        $scope['show_' + view] = true;
    }

    $scope.changeView('login'); 

    $scope.exec_login = function() {
        var email = $scope.login_email;
        var pass = $scope.login_password;
        alert('logging in ' + email + ' ' + pass);
    }

When I run my page, I do see my email and pass inputs as expected, and when I edit them the debug values next to the inputs change appropriately. However, when I click the button, the alertbox still has the original values.

How can I get the values acquired inside the function to see the latest version in the input box? I know I could use VanillaJS to grab them, but I'd rather use proper Angular!

Here's a screengrab of what I'm seeing:

It looks like you are running into an unintuitive prototypical inheritance feature. See http://stackoverflow.com/a/18128502/76512. Basically, if you are using ng-model you should have a dot in whatever model you assign, otherwise the value is assigned to the local scope and not the parent. When you `ng-include` a new scope is created for it, and you are assigning the values to that local scope and not your original scope — Dustin Hodges, Jul 07 '16 at 19:19
@DustinHodges That seems to be the same conclusion I reached (see my self answer) - don't use the top level scope. That question (and others) though don't seem to be very searchable for people who don't know the answer (like me). It's very useful for people who do know what to search for already, though, to quickly help people who post. I hope this question ends up searchable for future askers. — corsiKa, Jul 07 '16 at 19:26
understood. It is hard to figure out what is going wrong in angular when you first start out. There's a lot of information out there about this problem, just google "always use a dot in angularjs". Unfortunately for you and other beginners you'd never know to search for that. Hopefully this question and your answer will point others in the right direction. — Dustin Hodges, Jul 07 '16 at 19:33

score 0 · Answer 1 · answered Jul 07 '16 at 19:19

Well this is weird, and I don't know WHY it doesn't work, but I did find a trick that does work and is probably a good idea in the long run.

Because this isn't the only view, I decided to create an object for my view's variables. I was already doing this implicitly with view_variable anyway. So I made my controller look like this:

app.controller('main-controller', function($scope) {

    $scope.login = {};

    $scope.login.email = 'abcd';
    $scope.login.password = 'defg';
    // snip

    $scope.exec_login = function() {
        var email = $scope.login.email;
        var pass = $scope.login.password;
        alert('logging in ' + email + ' ' + pass);
    }

Updating my form to use the new variables login.email and login.password instead of login_email and login_password caused them to start working properly.

While I would still love to know why the top-level scoped variables didn't update properly, I'm happy to see this workaround does indeed let me continue prototyping and, in all honesty, properly scoping my variables will save headaches down the road.

Check this out: http://stackoverflow.com/questions/18128323/if-you-are-not-using-a-dot-in-your-angularjs-models-you-are-doing-it-wrong — lintmouse, Jul 07 '16 at 19:29

controller function sees old version of the variable

1 Answers1