Data binding in AngularJS app with routes

Question

Data binding in AngularJS app with routes

I'm using Ionic to start a new Phonegap application. It relies on Angular.

So here is the view :

<ion-view title="'Login'" left-buttons="leftButtons">
    <ion-content has-header="true">
        <input type="text" ng-model="new_name" placeholder="Name">
        {{new_name}}
        <input type="text" ng-model="new_text" placeholder="Message..." ng-keydown="addMessage($event)">
    </ion-content>
</ion-view>

The controller :

.controller('LoginCtrl', function($scope) {
        $scope.new_name = "ininame";

        $scope.addMessage = function(e) {
            console.log($scope);
            if (e.keyCode != 13) return;
            console.log({name: $scope.new_name, text: $scope.new_text});
        };
    })

And the config :

.state('eventmenu.login', {
                url: "/login",
                views: {
                    'menuContent' :{
                        templateUrl: "templates/login.html",
                        controller: "LoginCtrl"
                    }
                }
            })

So the {{new_name}} updates when changing the above input, but the value of $scope.new_name in the controller remains "ininame" and never changes. When triggering the function, the console.log shows so.

Note that if I add a div with ng-controller = "LoginCtrl" like this :

<ion-view title="'Login to Wallit'" left-buttons="leftButtons">
    <ion-content has-header="true">
        <div ng-controller="LoginCtrl">
        <div ng-repeat="msg in messages"><em>{{msg.name}}</em>: {{msg.text}}</div>
        <input type="text" ng-model="new_name" placeholder="Name">
        {{new_name}}
        <input type="text" ng-model="new_text" placeholder="Message..." ng-keydown="addMessage($event)">
        </div>
    </ion-content>
</ion-view>

It works perfectly. The binding of a controller in the config of the module should work the same way a regular controller would !

Confused... Thanks ahead for any help !

javascript
angularjs
data-binding
cordova
ionic-framework

Answer 1

Have a read of this: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

Essentially you need to better understand how nested scopes work. If you encapsulate your model value inside a container object, the problems you are having should disappear.

ng-model="mycontainer.new_name"
{{mycontainer.new_name}}
$scope.mycontainer.new_name = 'ininame';